vue相同路由跳轉(zhuǎn)強(qiáng)制刷新該路由組件操作
想必大家在平時(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è)參考，也希望大家多多支持腳本之家。
- vue組件強(qiáng)制刷新的4種方案
- Vue3中進(jìn)行頁(yè)面局部刷新組件刷新的操作方法
- Vue?Router解決多路由復(fù)用同一組件頁(yè)面不刷新問(wèn)題(場(chǎng)景分析)
- vue組件值變化但不刷新強(qiáng)制組件刷新的問(wèn)題
- Vue實(shí)現(xiàn)父子組件頁(yè)面刷新的幾種常用方法
- vue打開(kāi)子組件彈窗都刷新功能的實(shí)現(xiàn)
- 解決vue更新路由router-view復(fù)用組件內(nèi)容不刷新的問(wèn)題
- vue強(qiáng)制刷新組件的方法示例
- Vue 實(shí)現(xiàn)手動(dòng)刷新組件的方法
- 使用Vue開(kāi)發(fā)動(dòng)態(tài)刷新Echarts組件的教程詳解
- vue強(qiáng)制刷新組件的三種方法
相關(guān)文章
這篇文章主要介紹了Vue實(shí)現(xiàn)二維碼的展示及下載功能,其中downloadQRCode（）函數(shù)中的url為要下載的文件的路徑,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-05-05
在Vue項(xiàng)目中,防止頁(yè)面被縮放和放大示例
今天小編就為大家分享一篇在Vue項(xiàng)目中,防止頁(yè)面被縮放和放大示例，具有很好的參考 價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10
Vue在H5 項(xiàng)目中使用融云進(jìn)行實(shí)時(shí)個(gè)人單聊通訊
這篇文章主要介紹了Vue在H5 項(xiàng)目中使用融云進(jìn)行實(shí)時(shí)個(gè)人單聊通訊,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-12-12
這篇文章給大家介紹了在Vue 中如何模塊化使用 Vuex,文中通過(guò)代碼示例給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-01-01
這篇文章主要介紹了基于vue+axios+lrz.js微信端圖片壓縮上傳方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
這篇文章主要為大家介紹了vue實(shí)現(xiàn)列表展示的示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
解決el-tree數(shù)據(jù)回顯時(shí)子節(jié)點(diǎn)部分選中父節(jié)點(diǎn)都全選中的坑
本文主要介紹了解決el-tree數(shù)據(jù)回顯時(shí)子節(jié)點(diǎn)部分選中父節(jié)點(diǎn)都全選中的坑，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
Vue使用fabric.js實(shí)現(xiàn)局部截圖與大圖預(yù)覽功能
這篇文章主要為大家詳細(xì)介紹了Vue如何使用fabric.js實(shí)現(xiàn)局部截圖與el-image-viewer大圖預(yù)覽功能,文中的示例代碼講解詳細(xì),感興趣的可以了解下2024-02-02
這篇文章主要介紹了Vue表單之v-model綁定下拉列表功能，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-05-05
詳解element-ui中el-select的默認(rèn)選擇項(xiàng)問(wèn)題
這篇文章主要介紹了詳解element-ui中el-select的默認(rèn)選擇項(xiàng)問(wèn)題，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08