vue3项目配置了子路由后刷新页面回到首页解决办法

如果配置了子路由,刷新页面后就会自动回到/页面,如何实现路由保持?

使用路由导航守卫实现状态保持:

代码:

javascript 复制代码
// 白名单路由(不需要保存和恢复)
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
        }
    }
})
相关推荐
2501_944521595 小时前
Ramda 跨端三方库仓颉适配全流程
开发语言·javascript·flutter·php
Ken_11157 小时前
小体积附件下载正常,大附件下载异常
javascript
变与不变8067 小时前
jQuery怎么使用
前端·javascript
神膘护体小月半8 小时前
flex 布局的 order 属性
前端·css
paopaokaka_luck8 小时前
流浪动物救助与收养系统(DeepSeek AI对话、 ECharts多维分析、救助流程衔接、领养与回访衔接、 捐赠确认与公示、志愿者协作)
java·前端·javascript·人工智能·mysql·echarts·推荐算法
仰望.8 小时前
vue 表格组件 vxe-table 树表格懒加载支持拖拽排序的详细用法
前端·javascript·vue.js·vxe-table
前端 贾公子8 小时前
vite-plugin-uni-manifest 升级指南
前端
小码哥_常8 小时前
iPhone 用户传了张 HEIC,我的前端崩了
前端
小码哥_常8 小时前
你发的原图可能暴露你家地址——聊聊图片 EXIF 隐私
前端
java1234_小锋8 小时前
【技术专题】CSS3 网页技术 - CSS3 优先级
前端·css·css3