vue 动态路由，刷新跳转404/空白问题

路由守卫

// 避免死循环
let isfirst = false
router.beforeEach(async (to) => {
    if(isfirst) {
        return true
    } else {
        //路由信息
        let obj = {
            path: "/test",
            name: "test",
            component: () => import("pages/test.vue"),
            meta: { title: "56456" },
            hidden: true
        };
        sessionStorage.setItem('router',JSON.stringify(obj))
        // 获取当前默认路由
        let currenRoutes = router.options.routes
        var has = currenRoutes.some(it => it.path == obj.path)
        if(!has) {
            currenRoutes.push(obj)
            isfirst = true
        }
        router.addRoute(obj)
        return { ...to,replace: true }
    }
}

main.js 刷新处理

import router from './router';
import { createApp } from 'vue';

const initRouter = async () => {
    let obj = await JSON.parse(sessionStorage.getItem('router'))
    if(obj) {
        router.addRoute(obj)
    }
}
const app = createApp(App);
const boot = async () => {
    await initRouter()
    app.use(ActionSheet,Search,Icon);
    app.use(router);
    app.use(store);
    app.use(vant);
    app.use(animate)
    app.component('PageLoading',PageLoading);
    app.mixin(commonInfoMixin);
    app.mount('#app');
}
boot()