vue3子路由怎么跳转

在Vue3中，使用动态路由和导航守卫可以轻松地实现子路由之间的跳转。假设你已经在项目的`router/index.js`文件中配置了子路由，例如：

{
  path: '/parent',
  name: 'Parent',
  component: ParentComponent,
  children: [
    {
      path: 'child1',
      name: 'Child1',
      component: Child1Component
    },
    {
      path: 'child2',
      name: 'Child2',
      component: Child2Component
    }
  ]
}

当你想从`Child1Component`跳转到`Child2Component`时，你可以这样做：

1. 使用`this.$router.push`方法：

// 在Child1Component内部
this.$router.push('/parent/child2');

2. 如果你想保留当前路径并添加新的子路径，可以使用`this.$route.push`：

// this.$route.fullPath 将包含当前路径，如 '/parent/child1'
this.$route.push({
  name: 'Child2', // 或者 path: 'child2'
});

3. 路由守卫（比如`beforeRouteEnter`或`beforeEach`）也可以用来在条件满足时进行跳转：

router.beforeEach((to, from, next) => {
  if (/* 条件 */) {
    next({ path: '/parent/child2' });
  } else {
    next();
  }
});