解決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)文章
vue3中實(shí)現(xiàn)組件通信的方法總結(jié)
在Vue3中，有多種方法可以實(shí)現(xiàn)組件之間的通信，本文就通過(guò)代碼示例給大家總結(jié)一些vue3實(shí)現(xiàn)組件通信的常用方法,需要的朋友可以參考下2023-06-06
本篇文章主要介紹了Vue中的v-cloak使用解讀，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-03-03
詳解vue結(jié)合el-table實(shí)現(xiàn)表格小計(jì)總計(jì)需求(summary-method)
這篇文章主要介紹了vue結(jié)合el-table實(shí)現(xiàn)表格小計(jì)總計(jì)需求(summary-method),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-01-01
vue中使用elementUI組件手動(dòng)上傳圖片功能
Vue是一套構(gòu)建用戶界面的框架， 開(kāi)發(fā)只需要關(guān)注視圖層， 它不僅易于上手，還便于與第三方庫(kù)或既有項(xiàng)目的整合。這篇文章主要介紹了vue中使用elementUI組件手動(dòng)上傳圖片,需要的朋友可以參考下2019-12-12
基于vue-upload-component封裝一個(gè)圖片上傳組件的示例
這篇文章主要介紹了基于vue-upload-component封裝一個(gè)圖片上傳組件的示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-10-10
ssm+vue前后端分離框架整合實(shí)現(xiàn)(附源碼)
這篇文章主要介紹了ssm+vue前后端分離框架整合實(shí)現(xiàn)(附源碼)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
Vue v2.5 調(diào)整和更新不完全問(wèn)題
這篇文章主要介紹了Vue v2.5 調(diào)整和更新不完全問(wèn)題的相關(guān)資料,需要的朋友可以參考下2017-10-10
Vue Easytable是一個(gè)基于Vue.js的數(shù)據(jù)表格組件庫(kù),它提供豐富的功能和靈活的配置,幫助開(kāi)發(fā)者快速搭建復(fù)雜的數(shù)據(jù)表格界面,這篇文章主要介紹了vue easytable組件使用,需要的朋友可以參考下2023-09-09
Vue3 響應(yīng)式 API 及 reactive 和 ref&
響應(yīng)式是一種允許以聲明式的方式去適應(yīng)變化的編程范例，這篇文章主要介紹了關(guān)于Vue3響應(yīng)式API及reactive和ref的用法,需要的朋友可以參考下2023-06-06
關(guān)于element el-input的autofocus失效的問(wèn)題及解決
這篇文章主要介紹了關(guān)于element el-input的autofocus失效的問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12