动态路由点击刷新之后会掉问题

原因

由于我们添加的是动态路由然后刷新的时候会存在丢失

解决

在加载整个组件的时候就进行根据id值获取菜单路由资源

app.vue中的js部分

<script setup lang="ts">
import { RouterView } from 'vue-router'
import { onMounted } from 'vue'
import { useAuthMenuStore } from './stores/modules/menu'
import { useRouter } from 'vue-router'
const storeMenu = useAuthMenuStore()
const router = useRouter()
onMounted(()=>{
    //获取存在内部的用户id
    const roeId = localStorage.getItem('uer_Id')
    //在调取pinia中存在的方法获取菜单以及当前页面路由
    roeId && storeMenu?.saveMenuList(roeId).then(()=>{
        console.log(':window.location.pathname}', window.location.pathname )
        //定向到之前刷新之前的页面
        router.replace({path:window.location.pathname})
    })
})
/**
 * 思路：路由刷新就会掉页面会显示空白
 * 在登录之后获取菜单之后再aapp.vue中在生命周期开始的时候加载menu菜单从本地获取用户id然后继续在生命周期挂载的时候进行保存menu菜单
 * 然后直接跳转到当前点击的这个路由进行重新加载这样就解决了
 */
</script>

 pinia中关于这部分的实现

import {defineStore} from 'pinia'
import {RequestAuthMenu,RequestResourceList} from '@/api/path/system'

//导入格式化菜单的方法
import {formateMenu} from '@/utils/menu'

import router from '@/router'
import { runInThisContext } from 'vm'

export const useAuthMenuStore = defineStore('authMenu', {
    state(){
        return {
            menuList:[] as any,
            resourceList:[] as any,
            breadList:[] as any
        }
    },
    actions:{
        async saveMenuList(roleId:any) {
            const dataLists = await Promise.all([
                RequestResourceList(roleId),
                RequestAuthMenu(roleId),
            ])
            const resourceData:any = dataLists[0]
            if (resourceData.resultCode === 1) {
                this.resourceList = resourceData.resultInfo.resource // 保存资源列表
            }
            const menuData:any = dataLists[1]
            if (menuData.resultCode === 1) {
                this.menuList = menuData.resultInfo //1. 保存菜单权限列表
                const formateMenuList = formateMenu(this.menuList) // 2. 格式化权限菜单， 路径对应的组件对象
                // 3. 添加动态路由
                formateMenuList.forEach((route:any) => {
                    router.addRoute(route)
                })
                
            }
        },
        saveBreadList(value:any){
            this.breadList = value
        },
    },
    getters: {
        list() :any {
            return this.menuList
        },
        bread():any{
            return this.breadList
        }

    },
    // 使用该插件，开启数据缓存
	persist: {
		//这里存储默认使用的是session
		enabled: true,
		strategies: [
			{
				//key的名称
				key: 'MenuKey',
				//更改默认存储，我更改为localStorage
				storage: localStorage,
				// 可以选择哪些进入local存储，这样就不用全部都进去存储了
				// 默认是全部进去存储
				paths: ['menuList','breadList','resourceList']
			}
		]
	}
})