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

Posted on by

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。

推薦閱讀：