vue router+ vuex+ 首頁登陸判斷邏輯

首頁登陸邏輯要求在頁面上判斷是否獲取到登陸token ，沒有獲取到則跳轉到登陸頁。登陸成功後，跳轉到前一個頁面。

1.vue router

路由判斷首先咱們想到的是router.beforeEach 前置導航守衛 ，這個方法接受三個參數 to from next 。 to參數爲即將跳轉的路由路徑，from爲當前導航正要離開的路由，next方法用來resolve這個鉤子。 下面以工做中寫的一個判斷爲爲例子：

router.beforeEach(async (to, from, next) => {
  const { name, meta } = to;
  const { requireLogin } = meta;
  if (name === 'login') {  // 若是是登陸頁則用next方法resolve掉這個鉤子，若是不是，進行到下一個判斷
    return next();   
  }
  const needLogin = requireLogin && !store.getters.user.isLogin;  // 從store中讀取是否獲取了已登陸的信息
  if (needLogin) {
    return next({   //  若是沒有則跳轉到登陸頁，將當前路由路徑放到參數中
      name: 'login',
      params: { back: to },
    });
  }
  return next();  
});
複製代碼

2. this.$router 與 this.$route   this.$router.push 與 this.$router.replace

在登陸頁完成登陸請求後進行下面的操做 獲取路徑中存放前一個路徑的參數 ,而後跳轉到該頁面

loginSuccess() {
      const { params: { back } } = this.$route;
      const route = back || { name: 'home' };
      const { name, params, query } = route;
      this.$router.replace({ name, params, query });
    },
複製代碼

在上面這段代碼中出現了兩個咱們常常混淆的概念:

咱們知道this.$router是router實例，能夠用來直接訪問路由。咱們稱router配置中每個對象爲一個路由記錄，this.$route是暴露出來用來訪問每一個路由記錄的。所以咱們獲取參數時使用的是this.$route 跳轉路由時使用的是道this.$router。

上端代碼中咱們使用了replace而不是push來跳轉路由，這二者的區別是會不會在history中產生記錄。replace不會新增記錄，而是直接替換掉了這條路由記錄。