vue路由攔截及頁面跳轉(zhuǎn)的設(shè)置方法
更新時間：2018年05月24日 13:59:02 作者：Mosowe
這篇文章主要介紹了vue路由攔截及頁面跳轉(zhuǎn)的設(shè)置方法，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下
路由設(shè)置：router/index.js
export default new Router({
routes: [
{
path: '/selfcenter',
name: 'selfcenter',
meta: {
requireAuth: true // 配置此條，進入頁面前判斷是否需要登陸
},
component: selfcenter
}
]
})
main.js：
/* eslint-disable no-new */
router.beforeEach((to, from, next) => {
if (to.matched.some(res => res.meta.requireAuth)) { // 驗證是否需要登陸
if (sessionStorage.getItem('sid')) { // 查詢本地存儲信息是否已經(jīng)登陸
next();
} else {
next({
path: '/login', // 未登錄則跳轉(zhuǎn)至login頁面
query: {redirect: to.fullPath} // 登陸成功后回到當(dāng)前頁面，這里傳值給login頁面，to.fullPath為當(dāng)前點擊的頁面
});
}
} else {
next();
}
});
login.vue：
登陸成功后：
sessionStorage.setItem('sid', res.data.data.sid); // 設(shè)置本地存儲信息
this.$router.push(this.$route.query.redirect); // 跳轉(zhuǎn)至前一頁，this.$route.query.redirect是獲取上面?zhèn)鬟f過來的值
總結(jié)
以上所述是小編給大家介紹的vue路由攔截及頁面跳轉(zhuǎn)的設(shè)置方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
Vue3中實現(xiàn)網(wǎng)頁時鐘功能(顯示當(dāng)前時間并每秒更新一次)
本文將詳細(xì)介紹如何在Vue3中實現(xiàn)一個每秒鐘自動更新的網(wǎng)頁時鐘,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-07-07
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)登錄驗證碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要通過示例和大家一起淺析一下Vue3的響應(yīng)式原理，文中的示例代碼講解詳細(xì)，對我們學(xué)習(xí)Vue3有一定幫助，需要的可以參考一下2022-08-08
這篇文章主要為大家詳細(xì)介紹了如何通過使用 Vue 3 的 Composition API 創(chuàng)建一個強大而靈活的自定義 Hook,簡化了在 localStorage 或 sessionStorage 中管理數(shù)據(jù)的流程,需要的可以參考下2023-12-12
Vue.js實現(xiàn)文件上傳壓縮優(yōu)化處理技巧
這篇文章主要介紹了Vue.js實現(xiàn)文件上傳壓縮優(yōu)化處理,本文給大家介紹兩種方法一種是借助canvas的封裝的文件壓縮上傳，二是使用compressorjs第三方插件實現(xiàn)，本文給大家介紹的非常詳細(xì)需要的朋友可以參考下2022-11-11
我們?nèi)粘ｍ椖块_發(fā)中,少不了組件之間的通信,我們可能只知道一些常見的方式比如props,emits,其實,實現(xiàn)組件間的通信有很多種方式,本文就給大家總結(jié)一些我們常見的通信方式,需要的朋友可以參考下2023-08-08
vue安裝依賴npm install過程中報錯npm ERR! cb() nev
這篇文章主要介紹了vue安裝依賴npm install過程中報錯npm ERR! cb() never called!問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-04-04
vue2.5.2使用http請求獲取靜態(tài)json數(shù)據(jù)的實例代碼
這篇文章主要介紹了vue2.5.2使用http請求獲取靜態(tài)json數(shù)據(jù)的實例代碼,需要的朋友可以參考下2018-02-02
解決element-ui里的下拉多選框 el-select 時,默認(rèn)值不可刪除問題
這篇文章主要介紹了解決element-ui里的下拉多選框 el-select 時,默認(rèn)值不可刪除問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
element input輸入框自動獲取焦點的實現(xiàn)
本文主要介紹了element input輸入框自動獲取焦點的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10