vue-router 动态添加菜单刷新后点击菜单报错

vue.esm.js?65d7:431 [Vue warn]: Error in beforeCreate hook: "TypeError: Cannot read property 'call' of null
router.addRoutes(accessRoutes)
next({ ...to, replace: true })

动态添加菜单,点击菜单后报错,后来发现是因为刷新后把动态菜单数据放在了localStorage,所以序列化成了json字符串,反序列化之后componen还是不能识别,所以只能写一个actions 重新匹配菜单,

export const componentsMap = {
    application_manage: () => import('@/views/my/manager/statistics')   
}


getRouter({ commit, state }) {
        return new Promise((resolve) => {
            let ruleList = comparedRouter(state.list)
            ruleList.push({ path: '*', redirect: '/404', hidden: true })
            resolve(ruleList)
        })
    },

comparedRouter这个是匹配方法,每个人不一样就不放出来了

const accessRoutes = await store.dispatch('login/getRouter')
router.addRoutes(accessRoutes)
next({ ...to, replace: true })

每次刷新都要重新去匹配动态菜单,添加进去。可以和鉴权放在一起

你可能感兴趣的:(vue-router 动态添加菜单刷新后点击菜单报错)