vue中解决动态路由加载,刷新页面出现路由重复添加/出现空白页的问题
vue动态路由刷新页面后出现问题的处理
·
1.首先单独存储动态路由权限所在的js文件
导出后方便后续在router.beforeEach()里面进行数据的整合
数据自定!!!!!
const standdoc = () => import('@/views/standdoc/standdoc')
const standdocAdd = () => import('@/views/standdoc/standdocAdd')
const standdocInfo = () => import('@/views/standdoc/standdocInfo')
const standdemo = () => import('@/views/standdoc/standdemo')
const routers=[
{
"index": "1",
"title": "标准报文导出",
"children": [
{
"index": "standdoc",
"title": "报文模板配置",
"path": "standdoc",
"kind": "standdoc",
"component": "standdoc",
"isShow": true
},{
"index": "standdocAdd",
"title": "报文模板配置",
"path": "standdocAdd",
"kind": "standdoc",
"component": "standdocAdd",
"isShow": false
},{
"index": "standdocInfo",
"title": "报文模板详情",
"path": "standdocInfo",
"kind": "standdoc",
"component": "standdocInfo",
"isShow": false
},{
"index": "standhistory",
"title": "报文导出历史查询",
"path": "standhistory",
"kind": "standhistory",
"component": "standhistory",
"isShow": true
},{
"index": "standdemo",
"title": "报文样例查询",
"path": "standdemo",
"kind": "standdemo",
"component": "standdemo",
"isShow": true
}
]
}
]
2.在路由拦截里面进行动态路由的设置
2.1.首先如果是根据用户来生成相应的动态路由,那么在拦截里面可以请求后端数据会返回该用户能够在左侧菜单上显示的内容,你根据res返回的内容在路由拦截里面将数据进行重组,重新拼接适合该内容的路由
在异步请求数据的方法中就可以进行拼接需要的路径信息
未拼接数据前静态路由中的信息:
拼接完路由后里面所拥有的动态路由信息
3.最关键的一步,利用路由的的addRoute方法+router.matcher来解决刷新页面后动态路由重复添加的问题
在路由那个自己写一个能够调用使用的方法!!!!!!!!!!!!!!!!!!!!
export const $addRoutes = (params) => {
router.matcher = new Router({ mode: 'history', base: 's-connect', routes: [] }).matcher;
params.forEach( item=> {
router.addRoute(item)
})
}
然后在你整理好动态路由数据的那里调用这个方法来对router进行设置
$addRoutes(整理好的新的路由数据);
解释:关键代码在于router.matcher,关于这个的解释看这个链接
router.matcher_Gin丶勤的博客-CSDN博客_router.matcher
原理就是每次刷新都会将路由信息重置,最后你将你的新的路由数据通过方法里面的 router.addRoute(item)来添加进去就可以了。
更多推荐
已为社区贡献1条内容
所有评论(0)