解決vue 路由變化頁(yè)面數(shù)據(jù)不刷新的問(wèn)題
每天記錄一點(diǎn)點(diǎn)，把我遇到的問(wèn)題記錄下來(lái)， 希望可以幫助到更多和我遇到同樣問(wèn)題的人。
問(wèn)題描述：通過(guò)調(diào)接口，動(dòng)態(tài)顯示幫助頁(yè)面的問(wèn)題列表， 問(wèn)題列表有多級(jí)，當(dāng)點(diǎn)擊的這個(gè)問(wèn)題沒(méi)有下一級(jí)問(wèn)題的時(shí)候跳入內(nèi)容頁(yè)。
問(wèn)題出在，我在電腦上做移動(dòng)端頁(yè)面的時(shí)候，相繼跳到詳情頁(yè)，我想返回，點(diǎn)擊
按鈕，直接跳轉(zhuǎn)到了如上第一張圖的樣子，no,no,no,這不是我想要的結(jié)果，此刻，想到了通過(guò)改變url來(lái)改變頁(yè)面的層級(jí)問(wèn)題。
一級(jí)的parent為0，默認(rèn)不顯示或顯示。
二級(jí)的parent為1，點(diǎn)擊一級(jí)路由變?yōu)槿鐖D：
點(diǎn)擊進(jìn)入下一級(jí)頁(yè)面的時(shí)候，數(shù)據(jù)會(huì)刷新，但是點(diǎn)擊電腦后退時(shí)，url最后的parent變?yōu)?了，頁(yè)面還顯示2的數(shù)據(jù)，
解決辦法如下：
created () {
console.log(this.getStatus(this.$route.path))
},
watch: {
'$route' (to, from) {
console.log(this.getStatus(this.$route.path))
}
},
methods: {
getStatus (urlStr) {
var urlStrArr = urlStr.split('/')
return urlStrArr[urlStrArr.length - 1]
}
},
以上這篇解決vue 路由變化頁(yè)面數(shù)據(jù)不刷新的問(wèn)題就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue組件和Route的生命周期的相關(guān)知識(shí),需要的朋友可以參考下2018-02-02
Mint UI 是 由餓了么前端團(tuán)隊(duì)推出的 一個(gè)基于 Vue.js 的移動(dòng)端組件庫(kù)，這篇文章主要介紹了mint-ui在vue中的使用示例，這里整理了詳細(xì)的代碼,有需要的小伙伴可以參考下2018-04-04
vue3點(diǎn)擊不同的菜單頁(yè)切換局部頁(yè)面實(shí)現(xiàn)方法
這篇文章主要給大家介紹了關(guān)于vue3點(diǎn)擊不同的菜單頁(yè)切換局部頁(yè)面實(shí)現(xiàn)的相關(guān)資料,文中示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue3具有一定的參考價(jià)值,需要的朋友可以參考下2023-08-08
vue實(shí)現(xiàn)多組關(guān)鍵詞對(duì)應(yīng)高亮顯示功能
最近小編遇到這樣的問(wèn)題，多組關(guān)鍵詞，這里實(shí)現(xiàn)了關(guān)鍵詞的背景色與匹配值的字體顏色值相同，下面通過(guò)定義關(guān)鍵詞匹配改變字體顏色，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友參考下吧2019-07-07
關(guān)于vue中使用three.js報(bào)錯(cuò)的解決方法
最近因?yàn)閠hree.js的項(xiàng)目要用Vue.js,下面這篇文章主要給大家介紹了關(guān)于vue中使用three.js報(bào)錯(cuò)的解決方法,文中通過(guò)圖文以及示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-03-03
當(dāng)一個(gè)頁(yè)面需要加載較多個(gè)組件時(shí),并且組件自身又比較復(fù)雜,如果一次性加載,可能等待時(shí)間較長(zhǎng),體驗(yàn)不好,這個(gè)時(shí)候就需要延遲加載了,本文為大家介紹了Vue2實(shí)現(xiàn)組件延遲加載的示例代碼,需要的可以參考下2024-01-01
Vue.js與 ASP.NET Core 服務(wù)端渲染功能整合
本文通過(guò)案例給大家詳細(xì)分析了ASP.NET Core 與 Vue.js 服務(wù)端渲染,需要的朋友可以參考下2017-11-11
Vue3關(guān)于響應(yīng)式數(shù)據(jù)類型詳解(ref、reactive、toRef、及toRefs)
這篇文章主要介紹了Vue3關(guān)于響應(yīng)式數(shù)據(jù)類型(ref、reactive、toRef、以及toRefs),本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-01-01
Vue3 elementUI 中 date-picker 使用過(guò)程遇到坑
這篇文章主要介紹了Vue3 elementUI 中 date-picker 使用過(guò)程遇到坑,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-10-10
Vue瀏覽器鏈接與接口參數(shù)實(shí)現(xiàn)加密過(guò)程詳解
這篇文章主要介紹了Vue瀏覽器鏈接與接口參數(shù)實(shí)現(xiàn)加密過(guò)程，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧2022-12-12