如何通过路线名称前往child路线？

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.

路由到 child

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

如何通过路线名称前往child路线？

How to go to a child route by route name?

vue.js

vue-router