前言
某些場景下我們需要利用addRoutes動態添加路由，但是刷新后就會失效，前段時間項目里剛好遇到了這個應用場景，所以就花時間研究了一下，做下分享跟記錄，說的不對的地方，請大家指正。
應用場景：用戶a登錄進系統，頁面上有個按鈕，點擊之后會動態添加路由并且跳轉，跳轉過去之后，用戶刷新后也會停留在當前頁面。 不點這個按鈕，瀏覽器輸入地址，用戶會跳到404頁面
github:https://github.com/Mrblackant/keepRouter/tree/master
思路
1.用戶點擊按鈕，用addRutes動態添加路由并跳轉，并把路由保存;
2.用戶在新跳轉的頁面，刷新時利用beforeEach進行攔截判斷，如果發現之前有保存路由，并且判斷新頁面只是刷新事件，再將之前保存的路由添加進來;
代碼
1.按鈕點擊，保存路由并跳轉
(1).在router/index.js里聲明一個數組，里邊是一些固定的路由，比如你的登錄頁面、404等等
//router/index.jsexport 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動態添加路由刷新不失效功能。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
