想必大家在平時(shí)開(kāi)發(fā)的時(shí)候可能遇到這種需求，在打開(kāi)該菜單頁(yè)面的情況下，再次點(diǎn)擊菜單需要刷新該組件（銷(xiāo)毀再創(chuàng)建）。而vue自身如果路由不變的情況下是不會(huì)這樣做的，那么只能使用一些騷操作了。

1.在菜單的路由跳轉(zhuǎn)上綁定一個(gè)隨機(jī)query參數(shù)，例如時(shí)間戳或者隨機(jī)數(shù)：

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

該操作會(huì)觸發(fā)路由改變，但是組件內(nèi)的狀態(tài)沒(méi)有初始化，因?yàn)榻M件沒(méi)有被重建。

2.在路由容器上綁定key值：

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

大功告成，通過(guò)key值的變化去強(qiáng)制刷新該組件。

補(bǔ)充知識(shí)：[vue-router] Duplicate named routes definition

瀏覽器告警信息

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

說(shuō)明路由命名的name屬性重復(fù)

舉 例：

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

改正：

{ path: ‘’, name: ‘’, redirect: ‘/fiibox/personHome’ },

以上這篇vue相同路由跳轉(zhuǎn)強(qiáng)制刷新該路由組件操作就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持好吧啦網(wǎng)。