vue router+vuex實現(xiàn)首頁登錄驗證判斷邏輯
首頁登錄邏輯要求在頁面上判斷是否獲取到登錄token ，沒有獲取到則跳轉(zhuǎn)到登錄頁。登錄成功后，跳轉(zhuǎn)到前一個頁面。
1.vue router
路由判斷首先我們想到的是router.beforeEach 前置導航守衛(wèi) ，這個方法接受三個參數(shù) to from next 。
to參數(shù)為即將跳轉(zhuǎn)的路由路徑，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({ // 如果沒有則跳轉(zhuǎn)到登錄頁，將當前路由路徑放到參數(shù)中
name: 'login',
params: { back: to },
});
}
return next();
});
2. this.$router 與 this.$route this.$router.push 與 this.$router.replace
在登錄頁完成登錄請求后進行下面的操作
獲取路徑中存放前一個路徑的參數(shù) ,然后跳轉(zhuǎn)到該頁面
loginSuccess() {
const { params: { back } } = this.$route;
const route = back || { name: 'home' };
const { name, params, query } = route;
this.$router.replace({ name, params, query });
},
在上面這段代碼中出現(xiàn)了兩個我們經(jīng)?；煜母拍?
我們知道this.$router是router實例，可以用來直接訪問路由。我們稱router配置中每一個對象為一個路由記錄，this.$route是暴露出來用來訪問每個路由記錄的。因此我們獲取參數(shù)時使用的是this.$route 跳轉(zhuǎn)路由時使用的是道this.$router。
上端代碼中我們使用了replace而不是push來跳轉(zhuǎn)路由，這兩者的區(qū)別是會不會在history中產(chǎn)生記錄。replace不會新增記錄，而是直接替換掉了這條路由記錄。
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
下面小編就為大家分享一篇vue注冊組件的幾種方式總結(jié)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
vue3?element-plus?實現(xiàn)表格數(shù)據(jù)更改功能詳細步驟
這篇文章主要介紹了vue3 element-plus實現(xiàn)表格數(shù)據(jù)更改功能,本文分步驟結(jié)合實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-07-07
這篇文章主要給大家介紹了關(guān)于Vue項目啟動報錯解決方法的相關(guān)資料,文中通過圖文將解決的過程介紹的非常詳細,對大家學習或者使用vue具有一定的參考借鑒價值,需要的朋友可以參考下2023-07-07
使用el-row及el-col頁面縮放時出現(xiàn)空行的問題及解決
這篇文章主要介紹了使用el-row及el-col頁面縮放時出現(xiàn)空行的問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了vue中data數(shù)據(jù)之間如何賦值問題，具有很好的參考價值，希望對大家有所幫助。2022-09-09
這篇文章主要介紹了vue-cli 3 全局過濾器的實例代碼，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-06-06
最近在用Vue制作移動端項目,碰到了輪播圖的制作,接下來就讓小編一步一步帶大家動作制作吧,下面這篇文章主要給大家介紹了關(guān)于vue中使用swiper輪播圖的正確姿勢,需要的朋友可以參考下2022-06-06
Vue如何實現(xiàn)將后端返回二進制文件在瀏覽器自動下載
Vue項目開發(fā)中,遇到界面下載功能時,前端如何實現(xiàn)將后端返回二進制文件在瀏覽器自動下載呢,本文就來和大家聊聊具體的解決方法吧2024-11-11
Vue源碼解析之Template轉(zhuǎn)化為AST的實現(xiàn)方法
這篇文章主要介紹了Vue源碼解析之Template轉(zhuǎn)化為AST的實現(xiàn)方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
本篇文章主要介紹了詳解Vue組件之間的數(shù)據(jù)通信實例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06