vue3路由权限管理

Question

怎么可以把这个 asyncroutes 添加进路由并挂载，打印显示已经添加成功，但是访问不到/admin/a，有没有人可以稍微指点指点，感谢万分

router.js

import { createRouter, createWebHistory } from 'vue-router'
import About from './components/About.vue'
import a from "./components/Test.vue"


export const routes = [
      path: '/about',
      name:'about',
      component: About
    },
]

export const asyncroutes  = [
  {
    path: '/admin/a',
    name: 'a',
    component: a
  }
]

export const router = createRouter({
  history: createWebHistory(),
  routes,
  linkExactActiveClass: 'active'
})

main.js

import { createApp } from 'vue'
import App from './App.vue'
import { router,asyncroutes} from './router'
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'


router.beforeEach((to,from,next) =>{
 if(localStorage.getItem("lastname")){
  console.log(router.getRoutes())
   router.addRoute(asyncroutes[0])
   console.log(router.getRoutes()) //打印显示已经添加成功，但是访问不到/admin/a
  next()
 }
 next()
})

createApp(App).use(ElementPlus).use(router).mount('#app')

Answer 1

为什么都是这种奇葩方案，全部添加后在路由拦截器里判断不行吗？