韩国云服务器,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()
}
})
发布于:2023-02-11,除非注明,否则均为
原创文章,转载请注明出处。
发表评论