时间戳

首页 > 解决方案 > VueJS - 应用程序无法定位路线

javascript - VueJS - 应用程序无法定位路线

问题描述

我的所有这些页面都可以正常工作，但登录页面。我有一个名为 Signin.vue 的组件，我将它添加到路由中，但是当我尝试访问它时（http://localhost:8080/#/signin），页面没有显示任何内容。

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Contatos from '@/components/Contatos'
import NovoContato from '@/components/NovoContato'
import ViewContato from '@/components/ViewContato'
import EditarContato from '@/components/EditarContato'
import Signin from '@/components/Signin'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/cont',
      name: 'Contatos',
      component: Contatos
    },
    {
      path: '/novo_cont',
      name: 'NovoContato',
      component: NovoContato
    },
    {
      path: '/:contato_id',
      name: 'view-contato',
      component: ViewContato
    },
    {
      path: '/edit/:contato_id',
      name: 'editar-contato',
      component: EditarContato
    },
    {
      path: '/signin',
      name: 'Signin',
      component: Signin
    }
  ]
})

标签： javascriptvue.jsvuejs2vue-componentvue-router

解决方案

这是因为这条路：

{
  path: '/:contato_id',
  name: 'view-contato',
  component: ViewContato
},

此路径没有特定名称，只有一个参数，这意味着在路由器中定义的所有路由都不起作用。

因此，您可以将路由放在SignIn路由之前ViewContato或指定ViewContato路由名称（path: 'view/:contato_id'例如）

推荐阅读