vue項目中路由跳轉頁面不變問題及解決

vue中路由跳轉頁面不變

問題

今天在開發vue移動端項目的過程中發現瞭一個bug,就是當按返回鍵的時候頁面並沒有發生變化,一開始還以為是沒有監聽到返回事件,但是通過測試之後發現返回事件監聽成功瞭,路由也發生瞭變化,相應事件也觸發瞭,就是頁面視圖沒有跟著改變。

解決方法

項目中路由設置的是 hash模式,所以對 hashchange 事件進行監聽(hash模式下,路由的變化會觸發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)
}

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

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

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'))

以上為個人經驗,希望能給大傢一個參考,也希望大傢多多支持WalkonNet。

推薦閱讀: