關於vue登入註冊，並保持登入狀態，是vue玩家必經之路，網上也有很多的解決方法，但是有一些太過於複雜，新手可能會看的一臉懵逼，現在給大家介紹一種我自己寫專案在用而且並不難理解的一種方法。
專案中有一些路由是需要登入才可以進入的，比如首頁，個人中心等等
有一些路由是不需要登入就可以進入，比如登入頁，註冊頁，忘記密碼等等
那如何判斷路由是否需要登入呢？就要在路由js裡面做文章
在router.js中新增meta區分
比如登入註冊頁面，不需要登入即可進入，那麼我們把meta中的islogin標誌設定為false
},
},
,}
接下來我們在login.vue中修改登入後狀態
我們使用axios向後台發起登入請求
this
.$axios.
post
("/***/login",)
.then
(data =>
else})
;
export
const store =
newvuex.store(,
// 獲取屬性的狀態
getters:
,// 設定屬性狀態
mutations:,}
,// 應用mutations
actions:
, flag),}
})
router.
beforeeach
((to,
from
, next)
=>)}
//如果登入標誌不存在，即未登入
}else
)//iviewui友好提示
iview.message.
info
('請先登入'
)//使用者進入無需登入的介面，則跳轉繼續
}else}}
);router.
aftereach
(route =>
);
tips：使用者退出只需要localstorage.removeitem(「flag」)即可
VueRouter 導航守衛 路由守衛
就是導航過程中各個階段的鉤子函式。分為 全域性導航守衛 路由導航守衛 元件導航守衛。在整個網頁中，只要發生了路由變化，就會觸發。全域性導航守衛主要包含兩個函式 beforeeach aftereach。在路由發生了改變，但是還沒有成功跳轉的時候會呼叫。router.beforeeach functi...
vue導航守衛
import vue from vue import router from router import store from store import elementui from element ui import element ui lib theme chalk index.css vue...
路由導航守衛
路由導航守衛 可以建立在main.js同級目錄下的permission.js中 main.js 直接引入使用 路由導航守衛 import router from router import store from store 引入進度條外掛程式 import nprpgress from nprogr...