首頁登入邏輯要求在頁面上判斷是否獲取到登入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();  //前端全棧學習交流圈：866109386
 }//幫助1-3年經驗前端人員，突破技術瓶頸，提升技術思維
 const needLogin = requireLogin && !store.getters.user.isLogin; // 從store中讀取是否獲取了已登入的資訊
 if (needLogin) {
  return next({  // 如果沒有則跳轉到登入頁，將當前路由路徑放到引數中
   name: 'login',
   params: { back: to },
  });
 }
 return next(); 
});
 

2. this. $router\mathrm{與}th$

在登入頁完成登入請求後進行下面的操作
獲取路徑中存放前一個路徑的引數 ,然後跳轉到該頁面

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不會新增記錄，而是直接替換掉了這條路由記錄。