快捷導(dǎo)航

vue路由攔截及頁面跳轉(zhuǎn)的設(shè)置方法

更新時(shí)間：2018年05月24日 13:59:02 作者：Mosowe

這篇文章主要介紹了vue路由攔截及頁面跳轉(zhuǎn)的設(shè)置方法，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

路由設(shè)置：router/index.js

export default new Router({ 
 routes: [ 
  { 
   path: '/selfcenter', 
   name: 'selfcenter', 
   meta: { 
    requireAuth: true // 配置此條，進(jìn)入頁面前判斷是否需要登陸 
   }, 
   component: selfcenter 
  } 
 ] 
})

main.js：

/* eslint-disable no-new */ 
router.beforeEach((to, from, next) => { 
 if (to.matched.some(res => res.meta.requireAuth)) { // 驗(yàn)證是否需要登陸 
  if (sessionStorage.getItem('sid')) { // 查詢本地存儲(chǔ)信息是否已經(jīng)登陸 
   next(); 
  } else { 
   next({ 
    path: '/login', // 未登錄則跳轉(zhuǎn)至login頁面 
    query: {redirect: to.fullPath} // 登陸成功后回到當(dāng)前頁面，這里傳值給login頁面，to.fullPath為當(dāng)前點(diǎn)擊的頁面 
    }); 
  } 
 } else { 
  next(); 
 } 
});

login.vue：

登陸成功后：

sessionStorage.setItem('sid', res.data.data.sid); // 設(shè)置本地存儲(chǔ)信息 
this.$router.push(this.$route.query.redirect); // 跳轉(zhuǎn)至前一頁，this.$route.query.redirect是獲取上面?zhèn)鬟f過來的值

總結(jié)

以上所述是小編給大家介紹的vue路由攔截及頁面跳轉(zhuǎn)的設(shè)置方法，希望對(duì)大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

Vue3中實(shí)現(xiàn)網(wǎng)頁時(shí)鐘功能(顯示當(dāng)前時(shí)間并每秒更新一次)
本文將詳細(xì)介紹如何在Vue3中實(shí)現(xiàn)一個(gè)每秒鐘自動(dòng)更新的網(wǎng)頁時(shí)鐘,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧
2024-07-07
vue實(shí)現(xiàn)登錄驗(yàn)證碼
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)登錄驗(yàn)證碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-08-08
淺析一下Vue3的響應(yīng)式原理
這篇文章主要通過示例和大家一起淺析一下Vue3的響應(yīng)式原理，文中的示例代碼講解詳細(xì)，對(duì)我們學(xué)習(xí)Vue3有一定幫助，需要的可以參考一下
2022-08-08
Vue自定義Hook實(shí)現(xiàn)簡化本地存儲(chǔ)
這篇文章主要為大家詳細(xì)介紹了如何通過使用 Vue 3 的 Composition API 創(chuàng)建一個(gè)強(qiáng)大而靈活的自定義 Hook,簡化了在 localStorage 或 sessionStorage 中管理數(shù)據(jù)的流程,需要的可以參考下
2023-12-12
Vue.js實(shí)現(xiàn)文件上傳壓縮優(yōu)化處理技巧
這篇文章主要介紹了Vue.js實(shí)現(xiàn)文件上傳壓縮優(yōu)化處理,本文給大家介紹兩種方法一種是借助canvas的封裝的文件壓縮上傳，二是使用compressorjs第三方插件實(shí)現(xiàn)，本文給大家介紹的非常詳細(xì)需要的朋友可以參考下
2022-11-11
vue常見的通信方式總結(jié)
我們?nèi)粘ｍ?xiàng)目開發(fā)中,少不了組件之間的通信,我們可能只知道一些常見的方式比如props,emits,其實(shí),實(shí)現(xiàn)組件間的通信有很多種方式,本文就給大家總結(jié)一些我們常見的通信方式,需要的朋友可以參考下
2023-08-08
vue安裝依賴npm install過程中報(bào)錯(cuò)npm ERR! cb() nev
這篇文章主要介紹了vue安裝依賴npm install過程中報(bào)錯(cuò)npm ERR! cb() never called!問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2025-04-04
vue2.5.2使用http請求獲取靜態(tài)json數(shù)據(jù)的實(shí)例代碼
這篇文章主要介紹了vue2.5.2使用http請求獲取靜態(tài)json數(shù)據(jù)的實(shí)例代碼,需要的朋友可以參考下
2018-02-02
解決element-ui里的下拉多選框 el-select 時(shí),默認(rèn)值不可刪除問題
這篇文章主要介紹了解決element-ui里的下拉多選框 el-select 時(shí),默認(rèn)值不可刪除問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2020-08-08
element input輸入框自動(dòng)獲取焦點(diǎn)的實(shí)現(xiàn)
本文主要介紹了element input輸入框自動(dòng)獲取焦點(diǎn)的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-10-10