在vue中使用全局路由守衛的方法:1.新建項目,安裝vue-router;2.引入vue和vue-router;3.使用Vue.use注冊路由;4.定義和配置路由;5.執行代碼使用全局路由守衛;
具體步驟如下:
1.首先,新建一個html項目,并在項目中安裝vue-router;
npm install vue-router
2.vue-router安裝好,在項目中引入vue和vue-router;
import Vue from 'vue'
import Router from 'vue-router'
3.vue和vue-router引入后,在項目中使用Vue.use方法注冊一個路由;
Vue.use(VueRouter)
4.路由注冊好后,在項目中定義路由并配置;
export default new vueRouter({
routes: [{
path: '/',
component: Index
}, {
path: '/Detail',
component: Detail,
meta: {
requireLogin: 2
}
}, {
path: '/Center',
component: Center,
meta: {
requireLogin: 1
}
}]
})
5.最后,路由配置好后,在項目中執行以下代碼即可使用全局路由守衛;
import router from './router'
router.beforeEach((to, from, next) => {
let token = window.localStorage.getItem('token')
if (to.meta.requireLogin && to.meta.requireLogin === 1) {
if (token) {
next()
} else {
next('/')
}
} else if (to.meta.requireLogin && to.meta.requireLogin === 2) {
if (token) {
next('/center')
} else {
next()
}
} else {
next()
}
})