vue动态路由页面刷新后路由消失处理

原因：页面刷新后，页面会重新实例化路由数据，因为是动态路由，所以页面刷新后会将router置为router/index.js配置的原始路由数据，所以匹配路由地址的时候会报错。因为只需要在用户会话期间保持动态路由状态，而不需要在不同组件之间共享或进行状态管理，所以将其存储在localStorage中

##修改Login.vue，将后台传回的menus数据缓存到localStorage中
//1、初始化路由
initRouter(res.data.data.role.menus)
localStorage.setItem('navMenus',JSON.stringify(filterMenus(res.data.data.role.menus)))
localStorage.setItem('menus',JSON.stringify(res.data.data.role.menus))
localStorage.setItem('token',JSON.stringify(res.data.data.token))

修改main.js，页面刷新的时候，会出发main.js的调用，因此我们在页面刷新的时候，重新进行路由的初始化

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import 'element-plus/theme-chalk/dark/css-vars.css'  //暗黑模式
import router from './router/index'
import {initRouter} from "@/util/routeUtil";

const app = createApp(App)

##初始化路由
const init = async ()=>{
    if (localStorage.getItem('token')){
        if (localStorage.getItem('menus')){
            await initRouter(JSON.parse(localStorage.getItem('menus')))
        }
    }
}

##通过await，在挂在之前先进行路由的初始化
const call = async ()=>{
    await init()
    app.use(ElementPlus)
    app.use(router)
    app.mount('#app')
}

##调用
call()

欢迎转载，转载请标注出处。关注公众号: JAVA大师, 后台回复 资源，既可获取资源链接 ！！！