首頁登錄邏輯要求在頁面上判斷是否獲取到登錄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不會新增記錄，而是直接替換掉了這條路由記錄。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
