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

更新時(shí)間：2020年08月05日 15:05:52 作者：CaanDoll

這篇文章主要介紹了vue相同路由跳轉(zhuǎn)強(qiáng)制刷新該路由組件操作，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧

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

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

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

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

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

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

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

補(bǔ)充知識：[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)強(qiáng)制刷新該路由組件操作就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue.js展示AJAX數(shù)據(jù)簡單示例講解
當(dāng)通過AJAX方式取回?cái)?shù)據(jù)后，使用vue.js可以完美地按一定邏輯在頁面上的展示數(shù)據(jù)，代碼簡單、優(yōu)美、自然，而且便于與在用的頁面框架集成，本文給大家介紹Vue.js展示AJAX數(shù)據(jù)簡單示例
2017-03-03
vue-cli3.0之配置productionGzip方式
這篇文章主要介紹了vue-cli3.0之配置productionGzip方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-05-05
vue分片上傳視頻并轉(zhuǎn)換為m3u8文件播放的實(shí)現(xiàn)示例
前端上傳大文件、視頻的時(shí)候會出現(xiàn)超時(shí)、過大、很慢等情況,為了解決這一問題,跟后端配合做了一個(gè)切片的功能,本文主要介紹了vue分片上傳視頻并轉(zhuǎn)換為m3u8文件播放的實(shí)現(xiàn)示例,感興趣的可以了解一下
2023-11-11
vue2.0 常用的 UI 庫實(shí)例講解
這篇文章主要介紹了vue2.0 常用的 UI 庫實(shí)例講解，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下
2017-12-12
vue實(shí)現(xiàn)將數(shù)據(jù)存入vuex中以及從vuex中取出數(shù)據(jù)
今天小編就為大家分享一篇vue實(shí)現(xiàn)將數(shù)據(jù)存入vuex中以及從vuex中取出數(shù)據(jù)，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-11-11
vue進(jìn)入頁面加載數(shù)據(jù)緩慢實(shí)現(xiàn)loading提示過程
這篇文章主要介紹了vue進(jìn)入頁面加載數(shù)據(jù)緩慢實(shí)現(xiàn)loading提示過程，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-08-08
解決VUEX刷新的時(shí)候出現(xiàn)數(shù)據(jù)消失
這篇文章主要介紹了解決VUEX刷新的時(shí)候出現(xiàn)數(shù)據(jù)消失,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-07-07
Vite使用Esbuild提升性能詳解
這篇文章主要為大家介紹了Vite使用Esbuild提升性能示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-08-08
vue-cli3.0如何使用prerender-spa-plugin插件預(yù)渲染
這篇文章主要介紹了vue-cli3.0如何使用prerender-spa-plugin插件預(yù)渲染，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-05-05
vue+element UI實(shí)現(xiàn)樹形表格帶復(fù)選框的示例代碼
這篇文章主要介紹了vue+element UI實(shí)現(xiàn)樹形表格帶復(fù)選框的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04