vue如何解决addRoutes动态添加路由后刷新失效的问题

来源：动视网责编：小采时间：2020-11-27 19:34:08

vue如何解决addRoutes动态添加路由后刷新失效的问题

vue如何解决addRoutes动态添加路由后刷新失效的问题:这篇文章主要介绍了关于vue如何解决addRoutes动态添加路由后刷新失效的问题，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下前言某些场景下我们需要利用addRoutes动态添加路由，但是刷新后就会失效，前段时间项目里刚好遇到了这个应用场景，

推荐度：

点击下载本文 文档为doc格式

导读vue如何解决addRoutes动态添加路由后刷新失效的问题:这篇文章主要介绍了关于vue如何解决addRoutes动态添加路由后刷新失效的问题，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下前言某些场景下我们需要利用addRoutes动态添加路由，但是刷新后就会失效，前段时间项目里刚好遇到了这个应用场景，

github:https://github.com/Mrblackant...
在线查看:http://an888.net/router/keepR...

思路

1.用户点击按钮，用addRutes动态添加路由并跳转，并把路由保存;
2.用户在新跳转的页面，刷新时利用beforeEach进行拦截判断，如果发现之前有保存路由，并且判断新页面只是刷新事件，再将之前保存的路由添加进来;

代码

1.按钮点击，保存路由并跳转

(1).在router/index.js里声明一个数组，里边是一些固定的路由，比如你的登录页面、404等等

//router/index.js
export const constantRouterMap=[
 {
 path: '/',
 // name: 'HelloWorld',
 component: HelloWorld
 }
 ]
Vue.use(Router)
export default new Router({
 routes: constantRouterMap
})

(2).按钮点击，跳转、保存路由;
注意，保存路由这一步骤，要做进要跳转到的组件里,这是为了防止在beforeEach拦截这边产生死循环
添加路由需要两点，一是path，二是component,你可以封装成方法，看着就会简洁一点，我这里就不做了
记得要用concat方法连接，固定的路由和动态新加的路由,这样浏览器回退的时候也能正常返回

//点击跳转
<template>
 <p>
 点击新增 动态路由: "secondRouter"
 <br/>
 <el-button @click="srouter" type="primary">新增动态路由</el-button>

 </p>
</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 newRoutes=constantRouterMap.concat([{path:'/secondRouter',
 component :resolve => require(["@/components/kk"], resolve )
 }])
 this.$router.addRoutes(newRoutes)
 this.$router.push({path:'/secondRouter'})
 }
 }
}
</script>

//跳转过去的component组件,xxx.vue
<template>
 <p class="secondRoute">
 恭喜你，动态添加路由成功，浏览器的链接已经变化；

 <h3>无论你怎么刷新我都会留在当前页面</h3>
 <h3>并且点击浏览器回退键，我会跳到之前页面,不会循环</h3>

 </p>
</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 (localStorage.getItem('new')) {
 var c = JSON.parse(localStorage.getItem('new')),
 lastUrl=getLastUrl(window.location.href,'/');

 if (c.path==lastUrl) { //动态路由页面的刷新事件
 let newRoutes = constantRouterMap.concat([{
 path: c.path,
 component: resolve => require(["@/components/" + c.component + ""], resolve)
 }])
 localStorage.removeItem('new')
 router.addRoutes(newRoutes)
 router.replace(c.path) //replace,保证浏览器回退的时候能直接返回到上个页面，不会叠加

 } 
 } 
 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动态添加路由刷新不失效功能。
不足的地方还请大家多多指正

vue如何解决addRoutes动态添加路由后刷新失效的问题

推荐度：

点击下载本文 文档为doc格式

标签：失效 VUE 解决

热门焦点

vue如何解决addRoutes动态添加路由后刷新失效的问题

vue如何解决addRoutes动态添加路由后刷新失效的问题

思路

代码

vue如何解决addRoutes动态添加路由后刷新失效的问题

最新推荐

猜你喜欢

热门推荐