vue解决addRoutes动态添加路由后刷新失效问题
前⾔
某些场景下我们需要利⽤addRoutes动态添加路由，但是刷新后就会失效，前段时间项⽬⾥刚好遇到了这个应⽤场景，所以就花时间研究了⼀下，做下分享跟记录，说的不对的地⽅，请⼤家指正。
应⽤场景：⽤户a登录进系统，页⾯上有个按钮，点击之后会动态添加路由并且跳转，跳转过去之后，⽤户刷新后也会停留在当前页⾯。不点这个按钮，浏览器输⼊地址，⽤户会跳到404页⾯
思路
1.⽤户点击按钮，⽤addRutes动态添加路由并跳转，并把路由保存;
2.⽤户在新跳转的页⾯，刷新时利⽤beforeEach进⾏拦截判断，如果发现之前有保存路由，并且判断新页⾯只是刷新事件，再将之前保存的路由添加进来;
代码
1.按钮点击，保存路由并跳转
(1).在router/index.js⾥声明⼀个数组，⾥边是⼀些固定的路由，⽐如你的登录页⾯、404等等
//router/index.js
export const constantRouterMap=[
{
path: '/',
// name: 'HelloWorld',
component: HelloWorld
}
]
Vue.use(Router)
route add 添加路由export default new Router({
routes: constantRouterMap
})
(2).按钮点击，跳转、保存路由;
注意，保存路由这⼀步骤，要做进要跳转到的组件⾥，这是为了防⽌在beforeEach拦截这边产⽣死循环
添加路由需要两点，⼀是path，⼆是component，你可以封装成⽅法，看着就会简洁⼀点，我这⾥就不做了
记得要⽤concat⽅法连接，固定的路由和动态新加的路由，这样浏览器回退的时候也能正常返回
//点击跳转
<template>
<div>
点击新增动态路由: "secondRouter"
<br/>
<el-button @click="srouter" type="primary">新增动态路由</el-button>
</div>
</template>
<script>
import router from 'vue-router'
import {constantRouterMap} from '@/router'
export default {
name: 'kk',
mounted(){
},
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
methods:{
srouter(){
let at([{path:'/secondRouter',
component :resolve => require(["@/components/kk"], resolve )
}])
this.$router.addRoutes(newRoutes)
this.$router.push({path:'/secondRouter'})
}
}
}
</script>
//跳转过去的component组件,xxx.vue
<template>
<div class="secondRoute">
恭喜你，动态添加路由成功，浏览器的链接已经变化；
<h3>⽆论你怎么刷新我都会留在当前页⾯</h3>
<h3>并且点击浏览器回退键，我会跳到之前页⾯，不会循环</h3>
</div>
</template>
<script>
import router2 from '@/router'
import router from 'vue-router'
export default {
name: 'HelloWorld',
mounted(){
localStorage.setItem('new',JSON.stringify({'path':'/secondRouter','component':'kk'}))//保存路由
},
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
methods:{
}
}
</script>
2.路由拦截beforeEach
这⾥拦截的时候，就判断localStorage⾥边有没有保存新的动态路由，如果有，就进⾏判断，逻辑处理，处理完之后就把保存的路由清除掉，防⽌进⼊死循环。
进⼊第⼀层判断后，需要再次判断⼀下是不是页⾯的刷新事件
import router from './router'
import { constantRouterMap } from '@/router' //router⾥的固定路由
router.beforeEach((to, from, next) => {
if (Item('new')) {
var c = JSON.Item('new')),
lastUrl=getLastUrl(window.location.href,'/');
if (c.path==lastUrl) { //动态路由页⾯的刷新事件
let newRoutes = at([{
path: c.path,
component: resolve => require(["@/components/" + cponent + ""], resolve)
}])
router.addRoutes(newRoutes)
}
}
next()
})
var getLastUrl=(str,yourStr)=>str.slice(str.lastIndexOf(yourStr))//取到浏览器出现⽹址的最后"/"出现的后边的字符
ps:⼀开始我还以为匹配不到路由跳转404要在拦截这⾥处理，后来发现根本不⽤，直接在注册路由的时候加上下边两段就⾏了：
export const constantRouterMap = [{
path: '/',
component: HelloWorld
},
{//404
path: '/404',
component: ErrPage
},
{ //重定向到404
path: '*', redirect: '/404' }
]
整体的思路⼤概就是这样，主要就是利⽤了beforeEach拦截+localStorage的数据存储，就能完成，addRoutes动态添加路由刷新不失效功能。
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。