vue全局路由守卫如何使用
在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()
}
})
声明:本站所有作品(图文、音视频)均由用户自行上传分享,或互联网相关知识整合,仅供网友学习交流,若您的权利被侵害,请联系 管理员 删除。
本文链接:http://news.ew35.com/