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

本篇內容介紹了“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'))

“vue項目中路由跳轉頁面不變問題如何解決”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！