大家好，又見面了，我是你們的朋友全棧君。
router.beforeEach（）一般用來做一些進入頁面的限制。比如沒有登入，就不能進入某些頁面，隻有登入了之後才有權限檢視某些頁面。。。說白了就是路由攔截。
第一步 規定進入路由需不需要權限
@/router/index.js
import A from '@/components/a'
{
path: '/a',
name: 'a',
component: A,
meta : {
//加一個自定義obj
requireAuth:true //這個參數 true 代表需要登入才能進入A
}
}, 複制
第二步 使用vuex整一個userId
@/assets/store.js
//使用vuex三步走
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
//這個理論來說
const store = new Vuex.Store({
state:{
userId : ''
}
})
export default store 複制
第三步 使用router.beforeEach()
@/main.js
思路：【
如果（即将進入的這個路由需要權限才能進入）{
如果(能擷取到這個老哥的userID){
就讓這個老哥進入這個路由
}否則{
就讓這個老哥進入b這個頁面
}
} 即将進入的路由不需要權限就能進入 {
就讓這個老哥進入這個路由
}
】
對應代碼：
import store from '@/assets/store' //把這個userId擷取過來
router.beforeEach((to,from,next)=>{
if(to.meta.requireAuth){
if(store.state.userId){
next()
}else{
next({
path:'/b'})
}
}else{
next()
}
}) 複制
第四步
第三步這個/b路由其實就是登陸頁面，
當進入A頁面之前，需要請求接口，擷取一下是否有登陸過，然後把這個userId存在vuex的state裡。
當沒有userId時，則在登陸之後，存一個userId到state裡。然後就敲完收工
釋出者：全棧程式員棧長，轉載請注明出處：https://javaforall.cn/157564.html原文連結：https://javaforall.cn