vue-routerルートの切り替えコンポーネントを簡単に話して、掘り下げた穴を再利用します。

問題の説明：vue-routerナビゲーションが切り替わる時、二つのルートが同じコンポーネントをレンダリングすれば、コンポーネントは再使用され、コンポーネントのライフサイクルフックは再起動されなくなり、コンポーネントの一部のデータはpathの変化によって更新されないようになります。
転覆現場再現：
これは私の/router/index.jsの内容の要約です。

export default new Router({
 routes: [
 {
 path: '/main',
 component: Main
 },
 {
 path: '/get',
 component: Main
 }
 ]
})

これは私のMain.vueの内容の抜粋です。

<p>{{$router.currentRoute.path}}</p>

上記の状況は明らかです。私はルーティング・ジャンプ前とルート・ジャンプ後のパス値を表示したいです。
ルートは/mainから/getにジャンプしました。理想的にはホームページに表示されるルートは/mainから/getになりました。
しかし、事実はホームページには変化がありません。表示内容は相変わらずです。
交通事故の原因分析
私の車の状況から見て、私の今回のルートのジャンプは前と後でまったく同じコンポーネントを使っています。
ルーティングパラメータを使用する場合、例えば/user/fooから/user/barにナビゲートすると、元のコンポーネントインスタンスが多重化される。二つのルートは同じコンポーネントをレンダリングしているので、廃棄よりも再作成すれば、多重化はより効率的になる。ただし、これはコンポーネントのライフサイクルフックが呼び出されないことを意味します。
route objectはimmuttableであり、成功するたびにナビゲーションに新しいオブジェクトが生まれます。
この2つのキーの情報は、通常のコンポーネントが多重化されていない場合、コンポーネント内のrouteオブジェクトは最新のルートに対応していますが、コンポーネントが多重化されている場合、コンポーネントのライフサイクルフックは再起動されないため、コンポーネント内のrouteオブジェクトは元のままです。更新されません。
救援に赴く
原因分析が明らかになりました。解決を始めましょう。幸いにvue-routerが解決したアプリは以下の通りです。
2.2で導入されたbefore RouteUpdateを使用して守備します。

const User = {
 template: '...',
 beforeRouteUpdate (to, from, next) {
 // react to route changes...
 // don't forget to call next()
 }
}

修正後のMain.vueは以下の通りです。

data () {
 return {
 path:this.$router.currentRoute.path;
 }
}
beforeRouteUpdate (to, from, next) {
 path = this.$router.currentRoute.path;
}

その結果、救援現場は再び転覆しました。
ページのパスは変わりません。
再び原因を分析して、vue-routerドキュメントを調べたら、重要な内容は以下の通りです。

beforeRouteUpdate (to, from, next) {
 //        ，           
 //     ，              /foo/:id，  /foo/1   /foo/2        ，
 //          Foo   ，          。                。
 //          `this`
 },

上に言ったのは
//foo/：idは、/foo/1と/foo/2の間をジャンプするとき、
私のは/mainから/getに異動しました。上記の状況に合わないので、転覆するべきです。
一回は本当に救援します

data () {
 return {
 path:this.$router.currentRoute.path;
 }
}
watch: {
 '$route' (to, from) {
 this.path = this.$router.currentRoute.path 
 }
}

今回は本当に救援に成功しました。ページのパスは/mainから/getになりました。
以上のこの浅談Vue-routerルートの切替コンポーネントは掘り起こした穴を小編で共有しました。参考にしていただければ幸いです。どうぞよろしくお願いします。