github:https://github.com/Mrblackant...
在线查看:http://an888.net/router/keepR...
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).按钮点击，跳转、保存路由;//点击跳转
<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动态添加路由刷新不失效功能。
不足的地方还请大家多多指正