欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue項目中路由跳轉(zhuǎn)頁面不變問題及解決

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

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

問題

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

解決方法

項目中路由設置的是 hash模式，所以對 hashchange 事件進行監(jiān)聽（hash模式下，路由的變化會觸發(fā)hashchange事件）

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

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

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

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

router-view 如下：

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

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

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

解決思路

在beforeRouteEnter鉤子時，使用sessionStorage存儲from.path；然后在點擊返回的時候使用this.$router.push

代碼：

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

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

相關文章

最新評論