原因
由于我们添加的是动态路由然后刷新的时候会存在丢失
解决
在加载整个组件的时候就进行根据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']
}
]
}
})