全局路由守卫
解决用户还没登录时就直接显示首页内容的问题
通过全局路由守卫 - 导航守卫 - 全局前置守卫,在进入页面之前就对内容进行拦截 判断用户是否登录
- 全局前置守卫
//全局前置守卫分别是to、from、next有三个参数
router.beforeEach((to,from,next)=>{
conslole.log(to)//我们要跳转的路由
conslole.log(from)//表示我们从哪个路由跳转过来
conslole.log(next)//控制下一步的跳转
})
- 配置全局守卫
const router=new VueRouter({
routes
})
router.beforeEach((to,from,next)=>{
conslole.log(to)
conslole.log(from)
conslole.log(next)
})
export default router
- 通过next我们可以跳转路径
next({name:"login"})
以上就是简单的全局前置守卫介绍
-
解决用户还没登录时就直接显示首页内容的问题
1.先用token判断用户是否登录
2.如果没有登录则前往登录页
//判断当前是否在登录页 if(to.path==="/login"){ //在登录页终止 return next() } //否则就强制去登录页,并设置未登录提示信息 Vue.prototype.$message("请登录") next({name:"login"})
-
解决用户登录成功后还能返回登录页的问题
1.判断当前是否是登录页,如果在登录页就返回上一级并终止,否则就在index页面