亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

vue項(xiàng)目中路由跳轉(zhuǎn)頁(yè)面不變問(wèn)題及解決

 更新時(shí)間：2022年08月05日 15:25:29   作者：Jiang_JY  
這篇文章主要介紹了vue項(xiàng)目中路由跳轉(zhuǎn)頁(yè)面不變問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue中路由跳轉(zhuǎn)頁(yè)面不變

問(wèn)題

今天在開(kāi)發(fā)vue移動(dòng)端項(xiàng)目的過(guò)程中發(fā)現(xiàn)了一個(gè)bug，就是當(dāng)按返回鍵的時(shí)候頁(yè)面并沒(méi)有發(fā)生變化，一開(kāi)始還以為是沒(méi)有監(jiān)聽(tīng)到返回事件，但是通過(guò)測(cè)試之后發(fā)現(xiàn)返回事件監(jiān)聽(tīng)成功了，路由也發(fā)生了變化，相應(yīng)事件也觸發(fā)了，就是頁(yè)面視圖沒(méi)有跟著改變。

解決方法

項(xiàng)目中路由設(shè)置的是 hash模式，所以對(duì) hashchange 事件進(jìn)行監(jiān)聽(tīng)（hash模式下，路由的變化會(huì)觸發(fā)hashchange事件）

在App.vue中給hashchange綁定事件：

?mounted() {
? ? // 檢測(cè)瀏覽器路由改變頁(yè)面不刷新問(wèn)題,hash模式的工作原理是 hashchange事件
? ? window.addEventListener('hashchange', () => {
? ? let currentPath = window.location.hash.slice(1)
? ? if (this.$route.path !== currentPath) {
? ? ? this.$router.push(currentPath)
? ? }
? }, false)
}

路由跳轉(zhuǎn)頁(yè)面不刷新、this.$router.go(-1)不生效

vue項(xiàng)目中遇見(jiàn)了這樣一個(gè)問(wèn)題：使用this.$router.go(-1)回到上一頁(yè)，路由改變了，但是頁(yè)面展示還是停留在當(dāng)前頁(yè)面，需要手動(dòng)刷新才能渲染跳轉(zhuǎn)后的頁(yè)面。

router-view 如下：

<router-view :key="$route.fullPath"></router-view>

一般情況用到上面這種寫(xiě)法就能解決問(wèn)題了，但是我這里還是不生效。

然后我就想到了如下方法：

解決思路

在beforeRouteEnter鉤子時(shí)，使用sessionStorage存儲(chǔ)from.path；然后在點(diǎn)擊返回的時(shí)候使用this.$router.push

代碼：

beforeRouteEnter(to, from, next) {
? ? next(()=> {
? ? ? window.sessionStorage.setItem('lasterRouter', from.path)
? ? })
? },
//返回上一頁(yè)
this.$router.push(window.sessionStorage.getItem('lasterRouter'))

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論