vue3+vite动态权限路由，路由跳转了页面没有渲染，直接空白（后台管理项目）

其实就是一行代码的问题，却花了我大半天的时间，一直以为是push之后component的问题，抓错了重点，因为性子也比较急，技术也菜，所以搞了好久，记录下来是为了自己再遇到能立刻回想起来，也希望能帮助需要的人 ，话不多说，直接上代码

项目使用的技术栈：vue3+vite+vuex+axios

import { createRouter, createWebHashHistory } from 'vue-router'
import Layout from 'components/layout/index.vue'
import login from '@/views/login/index.vue'
import menuArray from '@/utils/menuList.js'
import store from '../store'
// import Home from "@/views/Home.vue"
// const modules = import.meta.glob('../views/*.vue')
const routes = [
  {
    path: '/',
    name: 'home',
    component: Layout,
    redirect: '/home',
    children: [
      {
        path: '/home',
        name: 'Home',
        component: () => import('@/views/Home.vue')
      },
    ]
  },
  {
    path: '/login',
    name: 'login',
    component: login
  }
]
const addDynamic=((menuArray)=>{
  menuArray.forEach((item)=>{
    if(item.children.length>0){
      item.children.forEach((routerItem)=>{
        // let pathroute=`../views/${routerItem.component}.vue`
        routes[0].children.push({
          path:routerItem.path,
          name:routerItem.name,
          // component:()=>{
          //   return import('../views/test1.vue')
          // }
          // component: eval(`()=>import("@/view/${routerItem.component}.vue")`)
          // component:resolve => require([`@/views/${routerItem.component}`],resolve),
          component:()=>import(`../views/${routerItem.component}.vue`),
          // component:()=>import(`${itemPathrouter}`),
          // component: pathroute,
        })
      })
    }else{
      // let itemPathrouter=`../views/${item.component}.vue`
      routes[0].children.push({
        path:item.path,
        name:item.name,
        // component:()=>{
        //   return import('../views/test2.vue')
        // }
        // component: eval(`()=>import("@/view/${item.component}.vue")`)
        // router:item.component,
        // component:resolve => require([`@/views/${item.component}`],resolve),
        component:()=>import(`../views/${item.component}.vue`),
        // component: ()=>import(`${itemPathrouter}`),
      })
    }
  })
  return routes
})

let menuList=addDynamic(menuArray)//写在这个位置路由页面都是正常的
console.log(routes);
const router = createRouter({
  history: createWebHashHistory(),
  routes 
})


// 路由拦截
router.beforeEach((to,from,next)=>{
  if(to.path=='login'){
    next()
  }else{
    if(store.getters.menuData.length==0){//没有缓存
      console.log(1111111);
      store.dispatch('setMenuData',menuArray)
      // let menuList=addDynamic(menuArray)//写在这个位置，页面面不出来
      // // console.log(menuList);
      router.addRoute(menuList)
      next({path:to.path})
    }else{
      next()
    }
  }
})

export default router

主要问题在于我把这行代码写在了路由拦截里面，导致路由跳转之后直接空白

 后来经过长时间的排查，我将拦截器关掉，将这行代码放在外面就可以正常使用

就将 let menuList=addDynamic(menuArray)这行代码放在上面就可以正常使用了，不知道什么原理，也不知道后面是否会产生其他问题，欢迎各位大神评论区留言解答。

书接上文，我找到问题了，就是同步和异步的问题，上面menuList是异步的，但是addroute已经执行了，可以这样写 addDynamic(menuArray).forEach((itemRouter)=>{
router.addRoute(itemRouter)
})这样就算是解决了，那一行代码就可以放里面，不用单独拿出去了，我真是个小菜鸡，才发现，如果有路由问题，可以 console.log(router.getRoutes())打印一下