vue3 跳转到子路由父路由高亮不显示 路径都是完整的

在Vue3中，当你从父路由跳转到一个嵌套路由并期望返回时父路由能够保持高亮，这通常涉及到导航守卫（Guards）和组件的`$router`引用。有时，由于Vue Router的一些默认行为，首次进入子路由时，它不会自动更新父级的active状态。要解决这个问题，你可以尝试以下几个步骤：

1. **在父组件中设置动态路由元信息**：
在父组件的`<router-view>`上添加`meta`属性，例如：

   <router-view :match="/child-route" :key="$route.path" :meta="{ name: 'childRoute', isChild: true }"></router-view>

这样当访问子路由时，可以明确标记。

2. **使用导航守卫**：
- **beforeEnter**: 判断当前是否是子路由，并更新父路由的active状态：

     export default {
       beforeEnter(to, from, next) {
         if (to.matched.some(m => m.meta.isChild)) {
           this.$router.app.currentRoute.meta.name === 'parentRoute' && next();
         } else {
           next();
         }
       },
     }

或者在`beforeRouteUpdate`中检查变化。

3. **利用组件内的钩子**：
如果你想要更精确地控制，可以在每个需要管理高亮的父组件里，设置一个`beforeRouteLeave`或`beforeDestroy`钩子，判断离开的是不是子路由，然后手动更新父级的active状态。

4. **全局设置**：
如果所有子路由都需要这样的效果，也可以考虑在Vue实例的生命周期钩子如`mounted`或`activated`中处理此问题，对每次路由变化都做检查。

请注意，以上代码示例可能会有所不同，具体取决于你的项目结构和需求。如果仍然有问题，可能需要查看Vue Router的官方文档或者查阅相关社区资源，寻找更详细的解答。