vue3 某一级路由有3个子路由，点击切换到第三个子路由，然后切换其他的一级路由再切换到开始的一级路由，要求自动选中第三个子路由 如何实现?

Question

下面是我的实现，需要遍历一级路由。最终实现了不管有多少级路由，都能“记住”，各位有什么更好的方法?个人心得就是用vue如果要把用户体验搞上去，好需要硬功底

Answer 1

简单说一下思路就是使用 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