如何使用vue router+vuex實作首頁登入驗證判斷

這次帶給大家怎麼使用vue router vuex實現首頁登入驗證判斷，使用vue router vuex實現首頁登入驗證判斷的注意事項有哪些，下面就是實戰案例，一起來看一下。

1.vue router

#路由判斷首先我們想到的是router.before Each 前置導航守衛，這個方法接受三個參數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不會新增記錄，而是直接替換掉了這條路由記錄。

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

應該如何建構webpack react開發環境

#怎麼使用JS實作呼叫本機攝影機

以上是如何使用vue router+vuex實作首頁登入驗證判斷的詳細內容。更多資訊請關注PHP中文網其他相關文章！