vue 解決addRoutes動態(tài)添加路由后刷新失效問題

更新時間：2018年07月02日 09:38:01 作者：大師兄

這篇文章主要介紹了vue 解決addRoutes動態(tài)添加路由后刷新失效問題，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

前言

某些場景下我們需要利用addRoutes動態(tài)添加路由，但是刷新后就會失效，前段時間項目里剛好遇到了這個應(yīng)用場景，所以就花時間研究了一下，做下分享跟記錄，說的不對的地方，請大家指正。

應(yīng)用場景：用戶a登錄進系統(tǒng)，頁面上有個按鈕，點擊之后會動態(tài)添加路由并且跳轉(zhuǎn)，跳轉(zhuǎn)過去之后，用戶刷新后也會停留在當前頁面。不點這個按鈕，瀏覽器輸入地址，用戶會跳到404頁面

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

思路

1.用戶點擊按鈕，用addRutes動態(tài)添加路由并跳轉(zhuǎn)，并把路由保存;
2.用戶在新跳轉(zhuǎn)的頁面，刷新時利用beforeEach進行攔截判斷，如果發(fā)現(xiàn)之前有保存路由，并且判斷新頁面只是刷新事件，再將之前保存的路由添加進來;

代碼

1.按鈕點擊，保存路由并跳轉(zhuǎn)

(1).在router/index.js里聲明一個數(shù)組，里邊是一些固定的路由，比如你的登錄頁面、404等等

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

(2).按鈕點擊，跳轉(zhuǎn)、保存路由;

注意，保存路由這一步驟，要做進要跳轉(zhuǎn)到的組件里,這是為了防止在beforeEach攔截這邊產(chǎn)生死循環(huán)

添加路由需要兩點，一是path，二是component,你可以封裝成方法，看著就會簡潔一點，我這里就不做了

記得要用concat方法連接，固定的路由和動態(tài)新加的路由,這樣瀏覽器回退的時候也能正常返回

//點擊跳轉(zhuǎn)
<template>
 <div>
  點擊新增 動態(tài)路由: "secondRouter"
  <br/>
  <el-button @click="srouter" type="primary">新增動態(tài)路由</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>

//跳轉(zhuǎn)過去的component組件,xxx.vue
<template>
 <div class="secondRoute">
  恭喜你，動態(tài)添加路由成功，瀏覽器的鏈接已經(jīng)變化；

  <h3>無論你怎么刷新我都會留在當前頁面</h3>
  <h3>并且點擊瀏覽器回退鍵，我會跳到之前頁面,不會循環(huán)</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

這里攔截的時候，就判斷l(xiāng)ocalStorage里邊有沒有保存新的動態(tài)路由，如果有，就進行判斷，邏輯處理，處理完之后就把保存的路由清除掉，防止進入死循環(huán)。

進入第一層判斷后，需要再次判斷一下是不是頁面的刷新事件

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) { //動態(tài)路由頁面的刷新事件
   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))//取到瀏覽器出現(xiàn)網(wǎng)址的最后"/"出現(xiàn)的后邊的字符

ps:一開始我還以為匹配不到路由跳轉(zhuǎn)404要在攔截這里處理，后來發(fā)現(xiàn)根本不用，直接在注冊路由的時候加上下邊兩段就行了：

export const constantRouterMap = [{
  path: '/',
  component: HelloWorld
 }, 
 {//404
  path: '/404',
  component: ErrPage
 },
 { //重定向到404
   path: '*', redirect: '/404' }
]

整體的思路大概就是這樣，主要就是利用了beforeEach攔截+localStorage的數(shù)據(jù)存儲，就能完成，addRoutes動態(tài)添加路由刷新不失效功能。

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: