Vue路由跳转问题：如何从三级嵌套路由跳转到首页?

Question

我的页面是三级嵌套路由，结构类似于 /message/detail/0。
但当我使用 this.$router.push('/index') 返回首页的时候，页面路径变成了/message/detail/index。

请问我该如何解决这个问题，希望从 /message/detail/0 页面直接跳转到 /index。

这个是路由配置的JS：

const routes = [
  {
    path: '/',
    name: 'layout',
    redirect:'/index',
    component: () => import('../views/Layout.vue'),
    children: [
      {
        path: 'index',
        component:() => import('../views/index/index.vue')
      },
      {
        path:'message',
        component:() => import('../views/message/message.vue'),
        children:[
          {
            path:'detail/:id',
            component:() => import('../views/message/messageDetail.vue')
          }
        ]
      }
    ]
  }
]

Answer 1

建议使用name跳转指定路由

this.$router.push({name: 'home'})

const routes = [
  {
    path: '/',
    name: 'layout',
    redirect:'/index',
    component: () => import('../views/Layout.vue'),
    children: [
      {
        path: 'index',
       name: 'home',
        component:() => import('../views/index/index.vue')
      },
      {
        path:'message',
        name: 'message',
        component:() => import('../views/message/message.vue'),
        children:[
          {
            path:'detail/:id',
            name: 'messageDetail',
            component:() => import('../views/message/messageDetail.vue')
          }
        ]
      }
    ]
  }
]