Vue-router路由判斷頁面未登錄跳轉(zhuǎn)到登錄頁面的實例
更新時間：2017年10月26日 08:59:46 作者：蓓蕾心晴
下面小編就為大家?guī)硪黄猇ue-router路由判斷頁面未登錄跳轉(zhuǎn)到登錄頁面的實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
如下所示：
router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.requireAuth)){ // 判斷該路由是否需要登錄權(quán)限
if (token) { // 判斷當(dāng)前的token是否存在
next();
}
else {
next({
path: '/login',
query: {redirect: to.fullPath} // 將跳轉(zhuǎn)的路由path作為參數(shù)，登錄成功后跳轉(zhuǎn)到該路由
})
}
}
else {
next();
}
});
在這之前是給路由加一個meta屬性：
{
path: '/index',
meta: {
title: '',
requireAuth: true, // 添加該字段，表示進(jìn)入這個路由是需要登錄的
},
}
注意：但是事實是登錄的時候大多數(shù)時候并不進(jìn)行跳轉(zhuǎn)，所以這里需要在login跳轉(zhuǎn)的路徑中再加一段：
if(this.$route.query.redirect){
// let redirect = decodeURIComponent(this.$route.query.redirect);
let redirect = this.$route.query.redirect;
this.$router.push(redirect);
}else{
this.$router.push('/');
}
以上這篇Vue-router路由判斷頁面未登錄跳轉(zhuǎn)到登錄頁面的實例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家介紹了Transition內(nèi)置組件使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
Vue?Router中router.resolve方法使用實例
這篇文章主要給大家介紹了關(guān)于Vue?Router中router.resolve方法使用的相關(guān)資料,router.resolve方法在前端路由庫中用于解析路由信息,接受路徑或路由對象,返回解析后的?URL、路由和位置對象,需要的朋友可以參考下2024-11-11
微信的浮窗，大伙應(yīng)該都用過，當(dāng)我們正在閱讀一篇公眾號文章時，突然需要處理微信消息，點擊浮窗，在微信上會有個浮標(biāo)，點擊浮標(biāo)可以再次回到文章。今天小編抽空給大家介紹vue 實現(xiàn)微信浮標(biāo)效果，感興趣的朋友一起看看吧2019-09-09
解決vue this.$forceUpdate() 處理頁面刷新問題（v-for循環(huán)值刷新等）
這篇文章主要介紹了解決vue this.$forceUpdate() 處理頁面刷新問題（v-for循環(huán)值刷新等），解決方法是使用this.$forceUpdate()強(qiáng)制刷新，文章給大家分享了代碼案例，需要的朋友參考下吧2018-07-07
下面小編就為大家?guī)硪黄獀ue2.X組件學(xué)習(xí)心得(新手必看篇)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
這篇文章主要介紹了vue中靜態(tài)文件引用的注意事項及說明,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04
Vue數(shù)據(jù)雙向綁定的實現(xiàn)方式講解
Vue數(shù)據(jù)雙向綁定原理：Vue內(nèi)部通過Object.defineProperty方法屬性攔截的方式，把data對象里每個數(shù)據(jù)的讀寫轉(zhuǎn)化成getter/setter，當(dāng)數(shù)據(jù)變化時通知視圖更新2022-08-08
這篇文章主要為大家詳細(xì)介紹了Vue跑馬燈marquee組件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-05-05
Webpack+Vue如何導(dǎo)入Jquery和Jquery的第三方插件
本文主要介紹了Webpack+Vue導(dǎo)入Jquery和Jquery的第三方插件的方法，具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
使用Pinia Persistedstate插件實現(xiàn)狀態(tài)持久化的操作方法
Pinia 作為 Vue 的新一代狀態(tài)管理工具,以其輕量化和易用性受到開發(fā)者的喜愛,然而,Pinia 默認(rèn)使用內(nèi)存存儲狀態(tài),為了解決這個問題,我們可以借助 Pinia Persistedstate 插件來實現(xiàn)狀態(tài)的持久化存儲,本文將詳細(xì)介紹該插件的使用方法,需要的朋友可以參考下2024-11-11