vue は、addRoutes が動的にルートを追加した後の更新失敗の問題をどのように解決しますか?-jsチュートリアル-php.cn

vue は、addRoutes が動的にルートを追加した後の更新失敗の問題をどのように解決しますか?

不言

リリース： 2018-07-09 14:02:17

オリジナル

8813 人が閲覧しました

この記事では、addRoutes がルートを動的に追加した後の更新失敗の問題を vue がどのように解決するかを主に紹介します。これを必要とする友人に参照してもらいます。 addRoutes を使用してルートを動的に追加しますが、更新すると無効になります。少し前にプロジェクトでこのアプリケーションシナリオに遭遇したので、時間をかけて調べ、共有し、記録しました。間違っている場合は修正してください。間違っている。

アプリケーションシナリオ:

ユーザー A がシステムにログインすると、ページにボタンが表示されます。

クリックするとルートが動的に追加され、ジャンプします。
ジャンプ後、ユーザーは現在のページに留まります。。このボタンをクリックせずにブラウザにアドレスを入力すると、ユーザーは 404 ページにジャンプしますgithub:https://github.com/Mrblackant...

オンラインで見る:http: //an888.net/router/ keepR...
アイデア
vue は、addRoutes が動的にルートを追加した後の更新失敗の問題をどのように解決しますか? 1. ユーザーは、addRutes を使用してルートとジャンプを動的に追加し、beforeEach を使用してルートを保存します。新しくジャンプしたページを更新するときに、以前にルートを保存したことがあり、新しいページが単なる更新イベントであると判断した場合は、以前に保存したルートを追加します。ボタンをクリックし、ルートを保存してジャンプします

(1)。router/ で、ログインページ、404 などの固定ルートを含む配列を宣言します。

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

ログイン後にコピー

(2)。ルートをジャンプして保存するためのボタンです。

ルートを保存するステップは、ジャンプ先のコンポーネントを入力するためです。これは、ルートの追加前に無限ループが発生するのを防ぐためです。1 つは、次の 2 つのポイントです。パス、もう 1 つはコンポーネントです。これをメソッドにカプセル化すると、簡潔に見えます。1 点、ここではそれを行いません。固定ルートと動的に追加されたルートを接続するには 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. ルートインターセプトの前に

こちらインターセプト時に、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 が一致しないため、ここでインターセプトで処理する必要があると思いました後で、それはまったく必要ではないことがわかりました。ルートを登録するときに、次の 2 つの段落を追加するだけです。
export const constantRouterMap = [{
    path: '/',
    component: HelloWorld
  }, 
  {//404
    path: '/404',
    component: ErrPage
  },
  { //重定向到404
      path: '*', redirect: '/404' }
]
ログイン後にコピー
全体的なアイデアは、主に beforeEach インターセプト + localStorage データストレージを使用して完了します。 AddRoutes は、ルート更新機能を無効化せずに動的に追加します。

不足点があれば修正してください

上記がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。