router.beforeEach()一般用来做一些进入页面的限制。比如是否是登录状态,若没有登录,就不能进入某些页面,只有登录成功后,才有权限查看某些页面,简单地说,就是通过vue的路由来实现页面的拦截和页面的跳转,来符合产品设计的某些规则。
下面以登录页面的权限,为例:
思路:
【
如果(即将进入的页面不是登录页面){
// 非login页面,检查是否登录
如果(没有登录){
// 未登录,就跳转到登录页面去
就让这个老哥跳转到登录页面,先进行登录的相关操作
}否则{
就让这个老哥进入这个页面
}
}(即将进入的页面是登录页面) {
就让这个老哥进入登录页面,进行登录的相关操作
}
】
对应代码:
router.beforeEach((to,from,next)=>{ if(to.name !== "Login"){ // 非login页面,检查是否登录 if(!isUserLogin){ // 未登录,则跳转到登录页面去 next({name:"Login"}) }else{ next() } }else{
// 登录页面 next() } })