vue3 多级路由嵌套 跳转

Vue3 中的多级路由嵌套是指在一个项目中配置有多个层级的路由结构，通常用于管理复杂的导航层次，例如网站的不同页面或功能模块。在 Vue Router v4 中，可以使用 `children` 属性来实现多级路由嵌套。下面是一个简单的例子：

// router/index.js
{
  path: '/parent',
  component: ParentComponent,
  children: [
    {
      path: 'child1',
      component: Child1Component
    },
    {
      path: 'child2',
      component: Child2Component,
      children: [
        {
          path: 'grandChild',
          component: GrandChildComponent
        }
      ]
    }
  ]
}

在这个例子中，`/parent` 是父路由，它有两个子路由 `child1` 和 `child2`。当你点击 `child2` 后面的 `grandChild`，实际会跳转到 `/parent/child2/grandChild`。

跳转时，你可以使用 `this.$router.push` 或者动态路由名、路径参数等。例如：

// 在某个组件内
this.$router.push('/parent/child1'); // 直接跳转到一级子路由
this.$router.push({ name: 'grandChild', params: { parentId: 'child2' }}); // 使用动态路由名称和参数