vue 路由頁面 首次打開瀏覽器 返回上一頁異常問題

 

我這里把dialog放到一個頁面中 通過路由跳轉到該頁面展示dialog 該dialog為頁面的子路由

直接就默認把dialog 的visible 的變量定義為true 路由到這個頁面就展示dialog

在dialog before-close 函數 使用this.$router.back() 返回前一個路由

出現問題，dialog頁面首次打開時，頁面返回前一個路由，但是dialog卻一直顯示關閉掉  除非刷新后才能正常   但是關掉瀏覽器，再次登錄還是遇到這樣的問題

 

原來一直以為是路由的頁面 使用dialog的問題，后來才發現是任何路由返回都有問題，正常點擊跳轉路由是沒有問題的

一刷新頁面就好使了的原因是，我已經登錄了全局前置守衛就沒有走我router 的push 跳轉到登錄頁面嗎，

而是直接調用next()跳轉到了頁面，所以返回功能就正常了

 

前置守衛必須調用一次 next 來 resolve 這個鈎子  這個鈎子后續應該還有什么操作 我們需要resolve后才能執行后續的操作

next("/login") ， next({path:"/login"}) 這兩個方法都是跳轉到登錄頁面

注意：next 執行的時候並沒有跳轉頁面，而是后續處理才跳轉頁面 所以這里直接調用路由方法跳轉的話會出現問題

比如next(false) 則表示不跳轉頁面，但是我們發現當前路由的信息有一點不正常，當前路由雖然沒有跳轉，但是持有的title信息改變了,變成了要跳轉到的路由頁面持有的title

 

具體可以參看vue-router的官方文檔

https://router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E5%85%A8%E5%B1%80%E5%89%8D%E7%BD%AE%E5%AE%88%E5%8D%AB

 

 

 

解決方法：

主要原因全局前置守衛 beforeEach 問題 攔截未登錄跳轉登錄問題  修改為使用next跳轉
to 要跳轉到的頁面
from 要跳轉離開的頁面

router.beforeEach((to, from, next) => {
  //console.log('登錄狀態', store.getters.isLogin);
  if (to.meta.requestAuth === true && store.getters.isLogin === false) {
      //跳轉頁面使用next跳轉 不要使用router的push跳轉
      next("/login");
  }else {
    document.title = to.meta.title ?? document.title;
    next();//跳轉到頁面
  }

});

發現首次進入可以返回就好使了