简述网站建设优劣的评价标准,市场营销计划书模板,青州网站建设优化推广,网站建设汽车后市场解决方案对于绝大部分的网站而言#xff0c;都是有个人主页的#xff0c;但是你如果没登陆的话#xff0c;还能访问个人主页吗#xff1f; 从逻辑上来讲#xff0c;那肯定是不行的。 所以#xff0c;要怎么阻止没登录状态下去访问个人主页呢#xff1f; 就是利用路由守卫#x…对于绝大部分的网站而言都是有个人主页的但是你如果没登陆的话还能访问个人主页吗 从逻辑上来讲那肯定是不行的。 所以要怎么阻止没登录状态下去访问个人主页呢 就是利用路由守卫对路由实现权限控制。而在Vue中路由守卫分为三种全局路由守卫、独享路由守卫 和 组件内路由守卫全局路由守卫顾名思义全局路由守卫就是对所有的路由都能进行权限控制。 全局路由又分为 全局前置守卫 和 全局后置守卫。全局前置守卫全局前置守卫会在组件初始化时调用每次路由切换之前都会调用。 即 此时处于A页面想跳转到B页面时会先通过全局前置守卫进行判断如果通过了那就会跳转否则就阻止跳转。//全局前置守卫
router.beforeEach((to,from,next) {//第一个参数to包含的内容是切换后的路由对象也就是跳转后的路由对象//第二个参数from包含的内容的是切换前的路由对象也就是跳转前的路由对象//第三个参数next()是否往下执行执行的话如果不写的话路由就不会跳转操作将会终止
})全局后置守卫全局后置守卫在组件初始化时调用以及每次路由切换之后调用。 即此时处于A页面要跳转到B页面在跳转完毕后会执行其中的回调。 所以一般可以用来路由跳转后的相应页面操作。router.afterEach((to,from) {//第一个参数to包含的内容是切换后的路由对象也就是跳转后的路由对象//第二个参数from包含的内容的是切换前的路由对象也就是跳转前的路由对象
}所以我们就可以把鉴权的操作写在前置守卫中而后置守卫可以用于简单的欢迎语弹窗。//全局前置守卫初始化时执⾏、每次路由切换前执⾏
router.beforeEach((to,from,next){console.log(beforeEach,to,from)if(to.meta.isAuth){ //判断当前路由是否需要进⾏权限控制if(localStorage.getItem(username) Eric){ //权限控制的具体规则next() //放⾏ }else{alert(暂⽆权限查看) }}else{ // 当前路由不需要权限控制next() //放⾏ }
})//全局后置守卫初始化时执⾏、每次路由切换后执⾏
router.afterEach((to,from) {console.log(afterEach,to,from)if(to.meta.title){document.title to.meta.title //修改⽹页的title}else{document.title vue_test}
})独享路由守卫独享路由守卫是在进入组件时被调用区别在于想对那个路由进行权限控制就直接在其路由配置项中添加守卫而其作用域也仅限于该路由。beforeEnter(to,from,next){//第一个参数to包含的内容是切换后的路由对象也就是跳转后的路由对象//第二个参数from包含的内容的是切换前的路由对象也就是跳转前的路由对象//第三个参数next()是否往下执行执行的话如果不写的话路由就不会跳转操作将会终止
}
效果其实差不多但全局路由守卫针对所有路由组件独享路由守卫只服务于被配置的那个路由组件组件内守卫当使用路由规则 进入 或者 离开 该组件时会触发组件内守卫的调用 组件内守卫 的作用域也仅限于该组件。//进入守卫通过路由规则进入该组件时被调用
beforeRouteEnter (to, from, next) {//第一个参数to包含的内容是切换后的路由对象也就是跳转后的路由对象//第二个参数from包含的内容的是切换前的路由对象也就是跳转前的路由对象//第三个参数next()是否往下执行执行的话如果不写的话路由就不会跳转操作将会终止
},
//离开守卫通过路由规则离开该组件时被调用
beforeRouteLeave (to, from, next) {//第一个参数to包含的内容是切换后的路由对象也就是跳转后的路由对象//第二个参数from包含的内容的是切换前的路由对象也就是跳转前的路由对象//第三个参数next()是否往下执行执行的话如果不写的话路由就不会跳转操作将会终止
}
它的区别之处就在于 beforeRouteLeave离开守卫。 它是在要切换出这个组件后被调用也就是离开组件后调用。 实际中我们可以利用它来完成某一些的操作比如 我们切换出该组件时暂停该组件的一些运行等我们在切换回这个组件时再开启运行。
