vue相同路由跳轉(zhuǎn)強(qiáng)制刷新該路由組件操作

發(fā)布時(shí)間：2020-10-26 05:18:46 來(lái)源：腳本之家閱讀：473 作者：CaanDoll 欄目：開(kāi)發(fā)技術(shù)

想必大家在平時(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è)參考，也希望大家多多支持億速云。

向AI問(wèn)一下細(xì)節(jié)

猜你喜歡