Vue3动态路由解决白屏问题

1. 在Nav组件中调用添加动态路由的方法

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import $api from '@/api/index'
import { IUserMenu } from '@/types/user'
import dynamicRoute from '@/utils/dynicRoute'
const Menus = ref<Array<IUserMenu>>([])
const getMenus = async () => {
    const result = await $api.user.getMenus()
    Menus.value = result.data.data
    dynamicRoute()
}
onMounted(() => {
    getMenus()
})
</script>

 解决首次进入页面，刷新白屏

1. 在main.js中调用动态路由的方法

 

import { createApp } from 'vue'
import App from '@/App.vue'
import router from '@/router/index'
import 'element-plus/dist/index.css'
import ElementPlus from 'element-plus'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import dynamicRoute from '@/utils/dynicRoute'
import pinia from '@/store'
const app = createApp(App)
// elementUI的icon
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}
app.use(pinia)
app.use(ElementPlus)
dynamicRoute()
app.use(router)
app.mount('#app')

解决首次登录，token失效问题：

1. 在store仓库中的getters属性中添加判断

 

getters:{
        getDynicRoute(state:StateType){
            let homeRouteObj:RouteRecordRaw = {
                path:'/home',
                component:()=>import('@/views/HomePage.vue'),
                children:[]
            }
            let ary:Array<RouteRecordRaw> = []           
            if(state&&state.permissionList){
            state.permissionList.forEach(item=>{
                if(item.children){
                    item.children.forEach(subItem=>{
                        let routeItem ={
                            path:subItem.path,
                            component:getViews((`../views${subItem.path}.vue`))
                        }
                        ary.push(routeItem)
                    })
                }
            })
           }
           homeRouteObj.children = ary
           return homeRouteObj
        }
    },