vue动态路由刷新丢失,vue路由改变页面不刷新
本文主要介绍了vue的动态添加路由页面在刷新时失败的原因和解决方法，帮助大家更好的理解和学习使用vue。感兴趣的朋友可以了解一下。
目录
问题描述
事件
返回界面前端菜单定义vuex中方法的问题。
原因分析
解决办法
在代码route/index.js的导航保护中添加逻辑判断
摘要
问题描述
昨天我在vue后台管理系统做动态添加权限页面到路由的功能时，遇到了一个问题：页面刷新时动态添加的路由页面显示404。
场景
后台管理系统的权限控制是在首页定义权限代码，保存并在表格中配置给后台学生，然后将后台返回的权限代码列表与首页配置的代码菜单列表进行筛选匹配。代码相等的页面为有权限的页面，然后通过router.addRoute()动态添加到路由中，这样就可以访问有权限的路由，否则会提示没有权限。
固定路由将从一开始就放置在新路由器中，例如登录页面。
接口返回
前端菜单定义
vuex中的方法
出现的问题
登录后调用vuex中的方法完成获取权限代码和动态筛选权限路由页面的操作，然后通过router.addRoute()将权限菜单添加到路由中，进入动态添加的路由页面，出现刷新页面404。
原因分析
当页面刷新时，路由被重新初始化，此时动态添加的路由不再存在。只有一些固定路由(比如登录页面)还在，所以出现了404的情况。
解决方案
当页面刷新时，exstore中存储的数据将被清除。
在router.beforeEach做出判断，路线的全局导航，根据VUEX中存储的列表是否有值来判断页面是否刷新。如果不为0，则为首次登录。登录后走路线匹配方式，不会有问题；如果list.length为0，则是刷新页面，需要重新执行路由匹配，重新添加动态路由。
实现代码 route/index.js的导航守卫中添加逻辑判断
———router.js————-
const constantRoutes=[
{
路径：“/”，
重定向：“/login”
},
{
路径：“/login”，
名称：登录，
元：{
验证：错误
},
component:()=import( @/views/log in )
},
{
路径：“/布局”，
名称：“布局”，
元：{
验证：正确
},
组件：()=import(@/views/layout/index )，
儿童：[
{
路径：“/index”，
名称：“索引”，
组件：()=导入( @/views/home )
}
]
},
{
路径：“*”，
component:()=import( @/views/error/404 )
}
]
Vue.use(VueRouter)
const createRouter=()=
新的VueRouter({
路线：constantRoutes
})
导出函数resetRouter() {
const newRouter=createRouter()
router . matcher=new router . matcher//重置路由器
}
const router=createRouter()
//页面刷新后，重置权限页面的动态路由，防止动态路由404的问题。
const reSetPermissionList=to={
返回新承诺((解决，拒绝)={
if (to.path！==/log in store . state . permission . permission list . length===0){
商店。分派( permission/getPermissionList )。然后(()={
解析( permCode )
})。catch(错误={
解析( permCode )
})
}否则{
解决()
}
})
}
router.beforeEach((收件人，发件人，下一个)={
const access token=local storage . getitem( access token )
如果(_。isEmpty(accessToken)) {//不管有没有登录，都到登录页面。
下一个({
路径：“/login”，
查询：{
重定向：to.fullPath
}
})
} else {//登录用户进入页面
if (to.path===/login) {
下一步({路径：/index })
}否则{
reSetPermissionList(to)。然后(data={
data===permCode ？next({ path: to.path，query: to.query }) : next()
})
}
}
})
总结
主要是通过全局导航来判断VUEX中的数据是否存在，页面是否刷新，如果有，再通过权限路由匹配的方法。
以上是vue动态添加路由页面刷新时失败的原因以及解决方案的细节。更多关于vue的路由页面刷新的信息，请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。