vue如何解決addRoutes動態新增路由後刷新失效的問題

這篇文章主要介紹了關於vue如何解決addRoutes動態添加路由後刷新失效的問題，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下

前言

某些場景下我們需要利用addRoutes動態添加路由，但是刷新後就會失效，前段時間專案裡剛好遇到了這個應用場景，所以就花時間研究了一下，做下分享跟記錄，說的不對的地方，請大家指正。
應用程式場景：使用者a登入系統，頁面上有個按鈕，點擊之後會動態加入路由並且跳轉，跳轉過去之後，使用者刷新後也會停留在目前頁面。不點這個按鈕，瀏覽器輸入位址，使用者會跳到404頁面

github:https://github.com/Mrblackant...
線上查看:http://an888.net/router/keepR...

#想法

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>
  <p>
    点击新增 动态路由: "secondRouter"
    <br>
    <el-button>新增动态路由</el-button>

  </p>
</template>

<script>
import router from &#39;vue-router&#39;
import {constantRouterMap} from &#39;@/router&#39;


export default {
  name: &#39;kk&#39;,
  mounted(){
  },
  data () {
    return {
      msg: &#39;Welcome to Your Vue.js App&#39;
    }
  },
  methods:{
    srouter(){
      let newRoutes=constantRouterMap.concat([{path:&#39;/secondRouter&#39;,
        component :resolve => require(["@/components/kk"], resolve )
      }])
      this.$router.addRoutes(newRoutes)
      this.$router.push({path:&#39;/secondRouter&#39;})
    }
  }
}
</script>

//跳转过去的component组件,xxx.vue
<template>
  <p>
    恭喜你，动态添加路由成功，浏览器的链接已经变化；

    </p>
<h3>无论你怎么刷新我都会留在当前页面</h3>
    <h3>并且点击浏览器回退键，我会跳到之前页面,不会循环</h3>

  
</template>

<script>
import router2 from &#39;@/router&#39;
import router from &#39;vue-router&#39;
export default {
  name: &#39;HelloWorld&#39;,
  mounted(){
      localStorage.setItem(&#39;new&#39;,JSON.stringify({&#39;path&#39;:&#39;/secondRouter&#39;,&#39;component&#39;:&#39;kk&#39;}))//保存路由
  },
  data () {
    return {
      msg: &#39;Welcome to Your Vue.js App&#39;
    }
  },
  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動態新增路由刷新不失效功能。
不足的地方還請大家多多指正

以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！

相關推薦：

vue router: dynamic route matching動態路由匹配

自製vue元件通訊外掛程式之用mixin寫入外掛程式

以上是vue如何解決addRoutes動態新增路由後刷新失效的問題的詳細內容。更多資訊請關注PHP中文網其他相關文章！