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

这篇文章主要介绍了关于vue如何解决addRoutes动态添加路由后刷新失效的问题，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下

前言

github:https://github.com/Mrblackant...
在线查看:http://an888.net/router/keepR...
vue如何解决addRoutes动态添加路由后刷新失效的问题-LMLPHP

思路

代码

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

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

登录后复制

//点击跳转
<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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注Work网！