Question

我知道我们可以使用$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来路由孩子。

Answer 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')
   }
  ]
 }
]

Answer 2

 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'}）

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

2 个答案: