解決vue項(xiàng)目跳轉(zhuǎn)同樣的頁面不刷新的問題思路詳解
更新時(shí)間：2023年09月05日 11:36:27 作者：前端菜鳥好先森
做公司官網(wǎng)項(xiàng)目的時(shí)候遇到的場景,頂部導(dǎo)航欄分類商品跳轉(zhuǎn)到分類詳情,然后在分類詳情再次點(diǎn)擊頂部導(dǎo)航欄里另外的分類商品,跳到同樣的頁面數(shù)據(jù)不刷新,下面小編給大家分享解決方式,關(guān)于vue跳轉(zhuǎn)不刷新問題感興趣的朋友一起看看吧
做公司官網(wǎng)項(xiàng)目的時(shí)候遇到的場景，頂部導(dǎo)航欄分類商品跳轉(zhuǎn)到分類詳情，然后在分類詳情再次點(diǎn)擊頂部導(dǎo)航欄里另外的分類商品，跳到同樣的頁面數(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)聽路由變化
對router進(jìn)行監(jiān)控，當(dāng)router發(fā)生變化時(shí)，執(zhí)行初始化界面方法
總結(jié)：我思路有兩種，一種是每個(gè)路由的參數(shù)都不一致（隨機(jī)），第二種 每次跳到這個(gè)頁面的時(shí)候監(jiān)聽路由的變化
到此這篇關(guān)于解決vue項(xiàng)目跳轉(zhuǎn)同樣的頁面不刷新的問題的文章就介紹到這了,更多相關(guān)vue跳轉(zhuǎn)不刷新內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
- vue跳轉(zhuǎn)頁面的幾種常用方法代碼示例
- vue實(shí)現(xiàn)頁面跳轉(zhuǎn)和參數(shù)傳遞的兩種方式
- Vue路由跳轉(zhuǎn)傳參或打開新頁面跳轉(zhuǎn)的方法總結(jié)
- vue3頁面跳轉(zhuǎn)的兩種方式
- vue中如何攜帶參數(shù)跳轉(zhuǎn)頁面
- Vue實(shí)現(xiàn)路由跳轉(zhuǎn)至外界頁面
- vue項(xiàng)目中路由跳轉(zhuǎn)頁面不變問題及解決
- vue?點(diǎn)擊按鈕?路由跳轉(zhuǎn)指定頁面的實(shí)現(xiàn)方式
- vue跳轉(zhuǎn)頁面打開新窗口,并攜帶與接收參數(shù)方式
- vue如何跳轉(zhuǎn)到其他頁面
相關(guān)文章
vue?beforeDestroy?clearInterval清除定時(shí)器失效的解決
這篇文章主要介紹了vue?beforeDestroy?clearInterval清除定時(shí)器失效的解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
Vue組件設(shè)計(jì)之多列表拖拽交換排序功能實(shí)現(xiàn)
這篇文章主要介紹了Vue組件設(shè)計(jì)之多列表拖拽交換排序,常見的場景有單列表拖拽排序，多列表拖拽交換排序，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-05-05
本篇文章主要介紹了vue中將網(wǎng)頁打印成pdf實(shí)例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-06-06
這篇文章給大家介紹了基于vue封裝一個(gè)帶眼睛的密碼子組件的方法,文章中有詳細(xì)的代碼講解,對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了vue實(shí)現(xiàn)按鈕的長按功能,點(diǎn)擊按鈕實(shí)現(xiàn)長按，用戶需要按下按鈕幾秒鐘，然后觸發(fā)相應(yīng)的事件，本文通過實(shí)例代碼給大家分享實(shí)現(xiàn)思路，感興趣的朋友一起看看吧2022-01-01
這篇文章主要介紹了簡單了解Vue + ElementUI后臺管理模板,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-04-04
vue js秒轉(zhuǎn)天數(shù)小時(shí)分鐘秒的實(shí)例代碼
這篇文章主要介紹了vue js秒轉(zhuǎn)天數(shù)小時(shí)分鐘秒的實(shí)例代碼,代碼簡單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-08-08
這篇文章主要介紹了在 Vue 中使用 JSX 及使用它的原因淺析，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-02-02
Vue科學(xué)計(jì)數(shù)法常見處理方法舉例
這篇文章主要給大家介紹了關(guān)于Vue科學(xué)計(jì)數(shù)法常見處理方法的相關(guān)資料,科學(xué)計(jì)數(shù)法是科學(xué)家用來表示很大或很小的數(shù)字的一種方便的方法,文中給出了詳細(xì)的代碼示例,需要的朋友可以參考下2024-02-02
這篇文章主要為大家詳細(xì)介紹了Vue如何將頁面導(dǎo)出成PDF文件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-08-08