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

Question

除登录页面外，所有这些页面都正常工作。我有一个名为 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
    }
  ]
})

Answer 1

因为这条路：

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

此路径没有具体名称，只有一个参数，表示路由器中定义在它之后的所有路由均无效。

所以你可以把SignIn路由放在ViewContato路由之前或者给ViewContato路由指定一个名字（例如path: 'view/:contato_id'）

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

VueJS - The app cant locate the route

javascript

vue.js

vue-router

vue-component

vuejs2