在vue3拦截器中添加动态路由

在 vue3 里拦截器中添加动态路由

我最开始这样写

router.beforeEach(async (to, from, next) => {
 {
        router.addRoute('about', {
            path: '/about',
            name: 'About',
            component: () => import('../views/dashboard/index.vue')
        })
        next()
})

但发现这样写不对，页面一直在 404 没添加成功，
后来看别人写的代码，发现添加完动态路由需要重定向一下
于是将代码改成这样了，其中动态路由是否更新使用pinia保存

router.beforeEach(async (to, from, next) => {
    const store = userStore()

	// 判断动态路由是否添加
    if (!store.asyncRouteMark) {
        router.addRoute('about', {
            path: '/about',
            name: 'About',
            component: () => import('../views/dashboard/index.vue')
        })
        // 添加动态路由已添加的标记
        store.setAsyncRouteMark(true)
        next({ ...to, replace: true })
    }else {
        next()
    }
})