所以#xff0c;要怎么阻止没登录状态下去访问个人主页呢#xff1f;

就是利用路由守卫#x…对于绝大部分的网站而言都是有个人主页的但是你如果没登陆的话还能访问个人主页吗

就是利用路由守卫对路由实现权限控制。

而在Vue中路由守卫分为三种全局路由守卫、独享路由守卫

组件内路由守卫全局路由守卫顾名思义全局路由守卫就是对所有的路由都能进行权限控制。

全局路由又分为

全局后置守卫。

全局前置守卫全局前置守卫会在组件初始化时调用每次路由切换之前都会调用。

此时处于A页面想跳转到B页面时会先通过全局前置守卫进行判断如果通过了那就会跳转否则就阻止跳转。

//全局前置守卫

router.beforeEach((to,from,next)

{//第一个参数to包含的内容是切换后的路由对象也就是跳转后的路由对象//第二个参数from包含的内容的是切换前的路由对象也就是跳转前的路由对象//第三个参数next()是否往下执行执行的话如果不写的话路由就不会跳转操作将会终止

})全局后置守卫全局后置守卫在组件初始化时调用以及每次路由切换之后调用。

所以一般可以用来路由跳转后的相应页面操作。

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){

{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()是否往下执行执行的话如果不写的话路由就不会跳转操作将会终止

beforeRouteLeave

{//第一个参数to包含的内容是切换后的路由对象也就是跳转后的路由对象//第二个参数from包含的内容的是切换前的路由对象也就是跳转前的路由对象//第三个参数next()是否往下执行执行的话如果不写的话路由就不会跳转操作将会终止

我们切换出该组件时暂停该组件的一些运行等我们在切换回这个组件时再开启运行。