vue相同路由跳轉(zhuǎn)強制刷新該路由組件操作
想必大家在平時開發(fā)的時候可能遇到這種需求，在打開該菜單頁面的情況下，再次點擊菜單需要刷新該組件（銷毀再創(chuàng)建）。而vue自身如果路由不變的情況下是不會這樣做的，那么只能使用一些騷操作了。
1.在菜單的路由跳轉(zhuǎn)上綁定一個隨機query參數(shù)，例如時間戳或者隨機數(shù)：
this.$router.push({
path:"/xxx",
query:{
t:Date.now(),
},
});
該操作會觸發(fā)路由改變，但是組件內(nèi)的狀態(tài)沒有初始化，因為組件沒有被重建。
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屬性重復(fù)
舉 例：
{ path: ‘', name: ‘index', redirect: ‘/fiibox/personHome' },
改正：
{ path: ‘', name: ‘', redirect: ‘/fiibox/personHome' },
以上這篇vue相同路由跳轉(zhuǎn)強制刷新該路由組件操作就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue實現(xiàn)二維碼的展示及下載功能,其中downloadQRCode（）函數(shù)中的url為要下載的文件的路徑,本文通過實例代碼給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-05-05
今天小編就為大家分享一篇在Vue項目中,防止頁面被縮放和放大示例，具有很好的參考 價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
這篇文章主要介紹了Vue在H5 項目中使用融云進行實時個人單聊通訊,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-12-12
這篇文章給大家介紹了在Vue 中如何模塊化使用 Vuex,文中通過代碼示例給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-01-01
這篇文章主要介紹了基于vue+axios+lrz.js微信端圖片壓縮上傳方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
這篇文章主要為大家介紹了vue實現(xiàn)列表展示的示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
解決el-tree數(shù)據(jù)回顯時子節(jié)點部分選中父節(jié)點都全選中的坑
本文主要介紹了解決el-tree數(shù)據(jù)回顯時子節(jié)點部分選中父節(jié)點都全選中的坑，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
Vue使用fabric.js實現(xiàn)局部截圖與大圖預(yù)覽功能
這篇文章主要為大家詳細介紹了Vue如何使用fabric.js實現(xiàn)局部截圖與el-image-viewer大圖預(yù)覽功能,文中的示例代碼講解詳細,感興趣的可以了解下2024-02-02
這篇文章主要介紹了Vue表單之v-model綁定下拉列表功能，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-05-05
詳解element-ui中el-select的默認選擇項問題
這篇文章主要介紹了詳解element-ui中el-select的默認選擇項問題，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08