vue3 某一级路由有3个子路由，点击切换到第三个子路由，然后切换其他的一级路由再切换到开始的一级路由，要求自动选中第三个子路由 如何实现?-灵析社区
codbad下面是我的实现，需要遍历一级路由。最终实现了不管有多少级路由，都能“记住”，各位有什么更好的方法?个人心得就是用vue如果要把用户体验搞上去，好需要硬功底   
sssssjkl简单说一下思路就是使用 "pinia" 或者 "ls" 缓存一下之前的路由值，在一级路由的导航守卫的 "beforeEnter" 钩子里面做一下读取然后
"replace" 过去就好了
***
Edit
import { createRouter, createWebHistory } from 'vue-router'
import RouterViewer from '../components/RouterViewer.vue'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/page',
name: 'app',
component: RouterViewer,
children: [
{
path: '/page/home',
name: 'home',
component: () => import('../views/HomeView.vue'),
},
{
path: '/page/about',
name: 'about',
component: () => import('../views/AboutView.vue')
}
]
}
]
})
router.beforeEach((to, from) => {
console.log('-----------------------------------')
console.log('to => ', { ...to })
console.log('from => ', { ...from })
// 获取当前路由匹配信息,并且反转，以便获取最近的目录菜单
const reverseMatchedList = to.matched.toReversed() // 这里用的 `toReversed()`，如果不兼容使用 `reverse()` 替换时会有修改源数组的问题，需要注意。
// 获取目录菜单下标
const catalogIndex = reverseMatchedList.findIndex(ro => ro.children.length)
// 获取当前匹配目录的信息
const catalogData = reverseMatchedList[catalogIndex]
// 当前是否是前往有子路由的目录，即下标为 0
if(catalogIndex === 0) {
// 从本地缓存中获取目录缓存的子路由路径
let cachePath = localStorage.getItem(catalogData.path)
// 重定向到缓存中的路径, 如果没有则重定向到第一个子路由
return cachePath || catalogData.children[0].path
} else {
// 如果不是前往有子路由的目录，则缓存当前路由路径，到目录缓存下。
localStorage.setItem(catalogData.path, to.fullPath)
return true
}
})
export default router