vue3动态路由刷新空白 搜索看了思否站内站外的所有的教程都没解决，求大佬拯救？

Question

"vue-router": "^4.1.3"
现在路由守卫的代码如下

router.beforeEach((to, from, next) => {
    NProgress.start()
    document.title = `${to.meta.title} | 碳交易系统`;
    console.log('router.beforeEach-to',to,router.getRoutes().length,router.getRoutes())
    const usePermission=usePermissionStore();
    if(to.path === '/login'){ // 登录界面，直接登录
        next();
    }else if (usePermission.routers.length<1 && to.path !== '/login') { // 未登录过且不是登录界面 也到登录界面
        next('/login');
    }  else { // 已登录界面
        console.log('router.getRoutes().length',router.getRoutes().length,usePermission.isAddRouters,router.hasRoute(to.name as string))
        if(router.getRoutes().length>5){
            console.log('路由存在',router.hasRoute(to.name as string))
            next()
            return
        }
        else{
            const { routers  } = usePermission; // 登录时候把动态路由存本地
            routers.forEach((route) => {
                console.log('添加路由',route)
                router.addRoute(route) // 动态添加可访问路由表
            })
            const redirectPath = from.query.redirect || to.path
            const redirect = decodeURIComponent(redirectPath as string)
            const nextData = to.path === redirect ? { ...to, replace: true } : { path: redirect }
            usePermission.isAddRouters = true
            next(nextData);
            console.log('router.hasRoute-else没有',nextData)
        }
    }
});

动态模板涉及的公共部分代码

<template>
  <v-header />
  <v-sidebar />
  <div class="content-box" :class="{ 'content-collapse': sidebar.collapse }">
    <v-tags></v-tags>
    <div class="content">
      <router-view v-slot="{ Component , route}">
        <transition name="move" mode="out-in">
          <keep-alive>
            <component :is="Component" :key="route.path"></component>
          </keep-alive>
        </transition>
      </router-view>
    </div>
  </div>
</template>

动态路由示例

    {
        path: '/dashboard',
        redirect: '/dashboard/home',
        meta: {
            title: '系统首页',
            hidden: true,
        },
        component: Home,
        children:[
            {
                path: '/dashboard/home',
                name: 'home',
                meta: {
                    title: '系统首页',
                    hidden: false,
                },
                component: () => import('../views/dashboard.vue'),
            },
        ]
    },

在浏览器上面也能看到路由添加成功了

可控制台报错说缺少模板

Answer 1

通篇没看到 await。也没有 .then 之类的操作。

那么可以说你这个异步路由是错误的，因为判断权限之类的肯定是异步操作，比如说需要请求接口。

所以 const usePermission=usePermissionStore(); 这个地方是不是要等待一下？或者说 } else { // 已登录界面 这里是不是要判断当前的权限接口是否已经请求完成？

console.log 打印的时候可以深拷贝一下。不然打出来的是快照，看着像是所有数据都有的。但是其实当然就是没有数据

Answer 2

应该是模板地址不对

 component: () => import('../views/dashboard.vue'),

改成这个试试

 component: () => import('@/views/dashboard.vue'),

Answer 3

不知道你解决没。猜测有可能是pinia导致的，检查一下载入顺序，确保在进入beforeEach之前pinia加载成功，你可以先打印一下你的usePermission

Answer 4

vue3下添加动态路由，会丢失模板。 也就是这个提示。问题你可以把这个模板都写死。界面都能显示出来了。具体给没给动态路由绑定模板，按自己算法了。