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


            前言



某些场景下我们需要利用addRoutes动态添加路由，但是刷新后就会失效，前段时间项目里刚好遇到了这个应用场景，所以就花时间研究了一下，做下分享跟记录，说的不对的地方，请大家指正。



应用场景：用户a登录进系统，页面上有个按钮，点击之后会动态添加路由并且跳转，跳转过去之后，用户刷新后也会停留在当前页面。 不点这个按钮，浏览器输入地址，用户会跳到404页面



github:http://github.com/Mrblackant/keepRouter/tree/master





思路



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>

 <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 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>

 <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 (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动态添加路由刷新不失效功能。



以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持中文源码网。