解決vue項(xiàng)目跳轉(zhuǎn)同樣的頁(yè)面不刷新的問(wèn)題思路詳解
做公司官網(wǎng)項(xiàng)目的時(shí)候遇到的場(chǎng)景，頂部導(dǎo)航欄分類商品跳轉(zhuǎn)到分類詳情，然后在分類詳情再次點(diǎn)擊頂部導(dǎo)航欄里另外的分類商品，跳到同樣的頁(yè)面數(shù)據(jù)不刷新
解決方式：
第一種：給router-view添加唯一key
也可以用return this.$route.path + Math.random();隨機(jī)數(shù)
這樣根據(jù)key值可實(shí)現(xiàn)重復(fù)跳轉(zhuǎn)一個(gè)路由實(shí)現(xiàn)路由刷新的效果。
第二種：
在watch中監(jiān)聽(tīng)路由變化
對(duì)router進(jìn)行監(jiān)控，當(dāng)router發(fā)生變化時(shí)，執(zhí)行初始化界面方法
總結(jié)：我思路有兩種，一種是每個(gè)路由的參數(shù)都不一致（隨機(jī)），第二種 每次跳到這個(gè)頁(yè)面的時(shí)候監(jiān)聽(tīng)路由的變化
到此這篇關(guān)于解決vue項(xiàng)目跳轉(zhuǎn)同樣的頁(yè)面不刷新的問(wèn)題的文章就介紹到這了,更多相關(guān)vue跳轉(zhuǎn)不刷新內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
- vue跳轉(zhuǎn)頁(yè)面的幾種常用方法代碼示例
- vue實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)和參數(shù)傳遞的兩種方式
- Vue路由跳轉(zhuǎn)傳參或打開(kāi)新頁(yè)面跳轉(zhuǎn)的方法總結(jié)
- vue3頁(yè)面跳轉(zhuǎn)的兩種方式
- vue中如何攜帶參數(shù)跳轉(zhuǎn)頁(yè)面
- Vue實(shí)現(xiàn)路由跳轉(zhuǎn)至外界頁(yè)面
- vue項(xiàng)目中路由跳轉(zhuǎn)頁(yè)面不變問(wèn)題及解決
- vue?點(diǎn)擊按鈕?路由跳轉(zhuǎn)指定頁(yè)面的實(shí)現(xiàn)方式
- vue跳轉(zhuǎn)頁(yè)面打開(kāi)新窗口,并攜帶與接收參數(shù)方式
- vue如何跳轉(zhuǎn)到其他頁(yè)面
相關(guān)文章
Vue + Elementui實(shí)現(xiàn)多標(biāo)簽頁(yè)共存的方法
這篇文章主要介紹了Vue + Elementui實(shí)現(xiàn)多標(biāo)簽頁(yè)共存的方法，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-06-06
Vue嵌套iframe時(shí)$router.go(-1)后退bug的原因解析
這篇文章主要介紹了Vue嵌套iframe,$router.go(-1)后退bug的問(wèn)題原因及解決方法,本文給大家分享問(wèn)題原因所在及解決方案,需要的朋友可以參考下吧2023-09-09
Vue中Keep-Alive緩存組件使用語(yǔ)法及原理深度解析
keep-alive是vue中的內(nèi)置組件,能在組件切換過(guò)程中將狀態(tài)保留在內(nèi)存中,防止重復(fù)渲染DOM,這篇文章主要介紹了Vue中Keep-Alive緩存組件使用語(yǔ)法及原理,需要的朋友可以參考下2024-07-07
vant-ui AddressEdit地址編輯和van-area的用法說(shuō)明
這篇文章主要介紹了vant-ui AddressEdit地址編輯和van-area的用法說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
淺談Vuex@2.3.0 中的 state 支持函數(shù)申明
這篇文章主要介紹了淺談Vuex@2.3.0 中的 state 支持函數(shù)申明，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-11-11
作為一個(gè)前端開(kāi)發(fā)者,我們要學(xué)會(huì)自己編寫一些開(kāi)發(fā)工具模塊,也可以自己編寫一些組件,甚至可以通過(guò)自己的能力編寫一個(gè)框架出來(lái),這都需要我們能夠靈活的管理我們的包,下面這篇文章主要給大家介紹了關(guān)于如何通過(guò)一文教會(huì)你在npm上傳自己的包的相關(guān)資料,需要的朋友可以參考下2023-03-03
這篇文章主要介紹了詳解vue-cli腳手架中webpack配置方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
mpvue中使用flyjs全局?jǐn)r截的實(shí)現(xiàn)代碼
這篇文章主要介紹了mpvue中使用flyjs全局?jǐn)r截的實(shí)現(xiàn)代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
Vue Getters和mapGetters的原理及使用示例詳解
Vuex的核心概念包括state、mutations、actions、getters和modules,今天,我們要深入探討其中一個(gè)關(guān)鍵部分：getters,以及它的相關(guān)輔助函數(shù)mapGetters,感興趣的朋友跟隨小編一起看看吧2024-08-08
單元測(cè)試是軟件開(kāi)發(fā)非?；A(chǔ)的一部分。單元測(cè)試會(huì)封閉執(zhí)行最小化單元的代碼，使得添加新功能和追蹤問(wèn)題更容易。Vue 的單文件組件使得為組件撰寫隔離的單元測(cè)試這件事更加直接。它會(huì)讓你更有信心地開(kāi)發(fā)新特性而不破壞現(xiàn)有的實(shí)現(xiàn)，并幫助其他開(kāi)發(fā)者理解你的組件的作用。2021-06-06