Raison : l'actualisation de la page entraînera une perte de données vuex, de sorte que les itinéraires ne peuvent pas être ajoutés dynamiquement
1. Ajoutez le champ isAddRoutes:false dans l' état store user.js pour déterminer si l'ajout de routes dynamiques a été ajouté. Fonction : chaque fois que la page est actualisée, jugez d'abord si la route dynamique est ajoutée, sinon, ajoutez à nouveau la route dynamique.
2. Après avoir ajouté des routes dynamiques dans mutations , attribuez true au champ isAddRoutes , indiquant que des routes dynamiques ont été ajoutées
//动态添加路由
SET_RESULTASYNCROUTES(state, resultAsyncRoutes) {
state.resultAsyncRoutes = resultAsyncRoutes
// anyRoutes 为重定向404路由，必须放在最后添加，防止登录或刷新显示404
state.allRoutes = constantRoutes.concat(state.resultAsyncRoutes, anyRoutes)
router.matcher = new Router({ mode: 'history' }).matcher;
router.addRoutes(state.allRoutes)
state.isAddRoutes = true
}3. Utilisez le garde de navigation dans router index.js pour opérer le routage dynamique avant que la page ne saute
const router = createRouter()
router.beforeEach(async (to, from, next) => {
// 获取token，没有获取退出和重新登录会报错
let token = getToken()
if (token) {
//当用户有登录，不能显示登录页面，直接进首页
if (to.path === 'login') {
next({ path: '/' })
}
//当字段isAddRoutes为false，重新dispatch getInfo，达到重新添加动态路由
if (!store.state.user.isAddRoutes) {
await store.dispatch('user/getInfo')
next({
...to,
replace: true
})
} else {
next()
}
} else {
if (to.path !== '/login') {
next({ path: '/login' })
} else {
next()
}
}
})4. Code GetInfo dans l'action store user.js :
// get user info
getInfo({ commit, state }) {
// console.log('getInfo');
return new Promise((resolve, reject) => {
getInfo(state.token).then(response => {
const { data } = response
commit('SET_USERINFO', data)
// comparisonRoutes封装函数 服务器中的路由数据和默认异步数据的对比，提取正确一部路由
commit('SET_RESULTASYNCROUTES', comparisonRoutes(cloneDeep(asyncRoutes), data.routes))
if (!data) {
return reject('Verification failed, please Login again.')
}
resolve(data)
}).catch(error => {
reject(error)
})
})
},Entrez la page 404
Toute page de redirection de routage 404 peut être résolue en l'ajoutant à la fin.