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: ‘’, redirect: ‘/fiibox/personHome’ },

以上這篇vue相同路由跳轉強制刷新該路由組件操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持好吧啦網。