大家好,我的开源项目PakePlus可以将网页/Vue/React项目打包为桌面/手机应用并且小于5M只需几分钟,官网地址:pakeplus.com
如果配置了子路由,刷新页面后就会自动回到/页面,如何实现路由保持?
使用路由导航守卫实现状态保持:
代码:
// 白名单路由(不需要保存和恢复)
const whiteList = ['/login', '/404', '/:pathMatch(.*)*']
// 修复后的路由守卫
router.beforeEach((to, from) => {
// 1. 保存当前路由(排除白名单)
if (!whiteList.includes(to.path) && to.path !== '/') {
sessionStorage.setItem('lastPath', to.fullPath)
}
// 2. 只有在以下条件都满足时才重定向:
// - 目标路径是根路径 '/'
// - 不是白名单路径
// - 有保存的路径
// - 保存的路径不是根路径
// - 保存的路径不是当前要去的路径(避免死循环)
if (to.path === '/') {
const lastPath = sessionStorage.getItem('lastPath')
if (
lastPath &&
lastPath !== '/' &&
!whiteList.includes(lastPath) &&
lastPath !== to.fullPath
) {
// 关键:避免死循环
return lastPath
}
}
})