您好,登錄后才能下訂單哦!
想必大家在平時開發的時候可能遇到這種需求,在打開該菜單頁面的情況下,再次點擊菜單需要刷新該組件(銷毀再創建)。而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相同路由跳轉強制刷新該路由組件操作就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持億速云。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。