1. 程式人生 > 程式設計 >vue相同路由跳轉強制重新整理該路由元件操作

vue相同路由跳轉強制重新整理該路由元件操作

想必大家在平時開發的時候可能遇到這種需求,在開啟該選單頁面的情況下,再次點選選單需要重新整理該元件(銷燬再建立)。而vue自身如果路由不變的情況下是不會這樣做的,那麼只能使用一些騷操作了。

1.在選單的路由跳轉上繫結一個隨機query引數,例如時間戳或者隨機數:

this.$router.push({
  path:"/xxx",query:{
    t:Date.now(),},});

該操作會觸發路由改變,但是元件內的狀態沒有初始化,因為元件沒有被重建。

2.在路由容器上繫結key值:

<router-view :key="$route.path + $route.query.t"></router-view>

大功告成,通過key值的變化去強制重新整理該元件。

補充知識:[vue-router] Duplicate named routes definition

瀏覽器告警資訊

[vue-router] Duplicate named routes definition: { name: “index”,path: “/index” }

說明路由命名的name屬性重複

舉 例:

{ path: ‘',name: ‘index',redirect: ‘/fiibox/personHome' },

改正:

{ path: ‘',name: ‘',

以上這篇vue相同路由跳轉強制重新整理該路由元件操作就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支援我們。