如何通过路线名称转到子路线?

时间:2019-03-13 11:15:24

标签: vue.js vue-router

我知道我们可以使用$router.push({ name: 'route-name' })按照其名称去一条路线。

我想知道的是如何使用child route name来做到这一点。 这是我的路线结构:

export default [
  {
    path: '/',
    name: 'home',
    component: () => import('@/views/Home.vue'),
    childs: [
      {
        name: 'home.about',
        path: '/about',
        component: import('@/views/Home/About.vue')
      }
    ]
  }
]

但是我的控制台说[vue-router] Route with name 'home.about' does not exist代表$router.push({ name: 'home.about' })

我缺少什么?

Obs:这个想法是不要用硬route path来路由孩子。

2 个答案:

答案 0 :(得分:1)

您有错字。

应该为children,而不是childs

export default [
{
  path: '/',
  name: 'home',
  component: () => import('@/views/Home.vue'),
  children: [
   {
    name: 'home.about',
    path: '/about',
    component: import('@/views/Home/About.vue')
   }
  ]
 }
]

答案 1 :(得分:1)

 const router = new VueRouter({
  routes: [{ 
        path: '/foo',
        name: 'foo',
        component: Foo,
        children: [
        {
          path: 'fooChild1',
          name: 'fooChild1',
          component: FooChildComponent
        },
        {
          path: 'fooChild2',
          name: 'fooChild2',
          component: FooChildComponent
        }
      ]
    }, { 
        path: '/bar', 
        component: Bar
    }]
})

现在,如果您希望导航至fooChild1,请使用$ router.push({name:'fooChild1'}),或者如果您希望导航至fooChild2,请使用$ router.push({名称:'fooChild2'})