探索vue2框架的世界：如何使用路由守卫中的钩子函数

路由守卫

• 路由系统在进行跳转操作时，会触发固定的钩子函数：路由守卫函数

使用场景：

场景一：
电商项目中的购物车组件，在未登录的状态下可以访问么？=>不可以
只有在特定情况下才可以访问的组件=>在非特定情况下不允许访问。如何设置这种不允许访问的后续操作(比如未登录时访问购物车，跳转到登录页面)，以及访问条件。

场景二：
登录成功后，在seesionid还有效的情况下，禁止跳转到登录页

场景三：
在离开当前组件，不管以何种方式离开，都要求弹出一个消息框。

路由标识符（meta）

• 路由的元数据：meta ， 用来为每个路由独立保存一些自定义的属性
• 当路由切换时，侦测到路由的切换，侦测到切换后，读元数据，最终做一个显示
• 使用方法

1. 在路由信息的meta属性中设置标识
   (meta和路由嵌套的children一样，是每一个路由信息都具备的属性)

{
    path:"/cart",
    name:'Cart',
    meta:{
        auth:true
    }
}

2. 在全局守卫中使用meta来判断当前需要跳转的组件

if(to.meta.auth){//判断是不是cart组件
    if(window.isLogin){
        next()
    }else{
        console.log('请先登录')
        next（'/login'）
    }
}else{
    next()
}

路由文件中的路由守卫

全局路由钩子函数:

• beforeEach
• afterEach

1. 全局前置钩子beforeEach

• 自带遍历功能(遍历每一个路由信息)，所以展示每一个组件的时候都会执行回调函数。
• 全局前置守卫 beforeEach 每个路由跳转之前都会触发此函数
• 守：看守–观察每次的路由跳转
• 卫：卫戍–可以控制跳转是否可以进行

// 在每一个路由改变的时候都要执行一遍 
router.beforeEach((to,from,next)=>{
    console.log(to)
    console.log(from)
     // to 目标路由对象
	 // from 当前导航正要离开的路由对象
	 // next(Function函数)，一定要调用该方法来resolve这个钩子。调用方法：next(参数或者空) ***必须调用
	 // next(无参数的时候): 进行管道中的下一个钩子，如果走到最后一个钩子函数，那么 导航的状态就是 confirmed （确认的）
})
// 应用场景：
// 1. 进行一些页面跳转前的处理,例如跳转到的页面需要进行登录才可以访问时,就会做登录的跳转
// 2. 进入页面登录判断,管理员权限判断,浏览器判断

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-En5Bcgk1-1683105313740)(https://note.youdao.com/yws/res/9/WEBRESOURCE280676bec771e764076a0578c3dc9109)]

案例1：登录成功才能跳转指定的组件

//路由字典中设置
meta: {
    requireAuth: true,
  },
//全局守卫  
router.beforeEach((to, from, next) => {
  if (to.meta.requireAuth) {
    if (sessionStorage.getItem('sync-session') && localStorage.getItem('sync-session')) {
      next()
    } else {
      next({
        path: '/',
        // query: {
        //   redirect:to.fullPath
        // } // 将跳转的路由path作为参数，登录成功后跳转到该路由
      })
    }
  } else {
    next()
  }  

案例2：如果本地有状态不允许直接跳转到 登录页面

  if(to.fullPath == "/"){
    if(localStorage.getItem('sync-session')){
      next({
        path:from.fullPath
      });
    }else {
      next();
    }
  }

案例3：状态栏随着各个路由设置的title变化

//例如，路由字典中设置某个路由的title
meta: {
    // title 自定义名称，随意书写
   title:'首页',
},

router.beforeEach((to,from,next)=>{
    //读取自定义的title属性
      const title=to.meta.title
      //标题栏
      document.title=title 
      //next：下一步，只有调用此函数 路由才会被放行，进行后续的操作--不写不跳转
      next()
})

2. 全局后置钩子afterEach
   beforeEach是在页面加载之前的，而afterEach是在页面加载之后的，所以这些钩子是不会接受next函数，也不会改变导航本身

单个的路由钩子函数:beforeEnter

1. 路由独享的守卫beforeEnter

• 可以直接在路由配置上直接定义beforeEnter，这些守卫与全局前置守卫的方法参数是一样的

beforeEnter((to,from,next)=>{
	.....
})

组件中的路由守卫

组件内 的路由钩子函数

• beforeRouteEnter
• beforeRouteLeave
• beforeRouteUpdate

1. beforeRouteEnter

beforeRouteEnter(to,from,next){
	// 在渲染该组件的对应路由被confirm前调用
	// 不能获取组件实例 this
	// 因为当钩子执行时，组件实例还没有被创建
}

2. beforeRouteUpdate

beforeRouteUpdate(to,from,next){
	// 在当前路由改变，但是组件被复用时调用
	// 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候。
	// 由于会渲染同样的Foo组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
	// 可以访问组件实例 this
	
}

3. beforeRouteLeave

beforeRouteLeave(to,from,next){
	// 导航离开该组件的对应路由时调用
	// 可以访问组件实例 this
}