路由的钩子函数

全局守卫(全局影响)

1. router.beforeEach: 这是最常用的全局守卫，它会在路由跳转之前被调用。可以用来做一些如身份验证、日志记录、设置页面标题等全局性的事务处理。该函数接收三个参数to, from, next，其中to表示即将进入的目标路由对象，from表示离开的路由对象，而next是一个函数，调用next()则进入下一个钩子（如果有的话）或者确认导航的有效性。

router.beforeEach((to,from,next)=>{
document.title = to.meta.title //标题,在路由添加meta可以改页面标题
    //判断是否登陆
    if(to.path !== '/'){
        const isLogin = localStorage.getItem('isLogin')
        if(isLogin){
            next()
        }else{
            router.push('/login')
            alert('请先登陆')
            return 
        }
    }
    next()
})

1. router.beforeResolve: 这个钩子在beforeEach之后被调用，它等同于beforeEach，但是它确保所有异步路由组件都被解析之后才被调用。这对于依赖于异步组件数据的路由守卫特别有用。
2. router.afterEach: 与beforeEach相对，afterEach守卫没有next函数，不会改变导航本身，它主要用于路由确认跳转之后的操作，比如结束进度条、加载动画、下载软件等。

独享守卫(局部影响)

1. beforeEnter: 这是定义在路由配置上的守卫，只有当访问这个路由时才会被调用，它的参数和全局前置守卫beforeEach相同。

const routes = [
    
    {
        path: '/about',
        name: 'About',
        compoent: () => import('../views/About.vue'),
        //独享守卫
         beforeEnter:(to,from,next)=>{
             next()
         }
    }
]

组件内的守卫(引入该函数)

可以直接从vue-router引入这些函数书写。

1. onBeforeRouteEnter

• 作用：在路由进入该组件之前调用，此时组件实例还没有被创建。

• 应用场景：

  • 验证用户权限，决定是否允许用户进入该页面。
  • 提前进行数据预加载，以便在进入页面时快速渲染。
  • 设置页面级别的元信息，如标题。

1. onBeforeRouteUpdate

• 作用：在当前路由改变，但该组件被复用时调用（例如，当路由参数改变时，比如从 /user/1 到 /user/2）。

• 应用场景：

  • 根据新的路由参数更新页面内容。
  • 重新获取数据，确保显示的内容是最新的。

1. onBeforeRouteLeave

• 作用：在离开该组件的对应路由时调用。

• 应用场景：

  • 阻止意外导航（例如，表单未保存时警告用户）。
  • 执行清理操作，如取消事件监听器或定时器。
  • 保存组件状态，以便下次返回时可以恢复。

  //离开页面
  onBeforeRouteLeave((to, from, next) => {
    console.log(to, from);
    const flag = window.confirm('你确定要离开这个页面吗？')
    if (flag) {
      next()
    }
  })

keep-alive

<keep-alive>是Vue提供的一个抽象组件，用于保存组件状态或避免重新渲染。

注意 ：当我们使用setup时，如何使用它来缓存数据？ 在app.vue:

<router-view v-slot="{ Component }">
      <keep-alive include="Home"> //include表示需要缓存的页面（数组，正则），可以在页面直接引入组件
        <component :is="Component"  />
      </keep-alive>
 </router-view>

但是无法直接在app.vue使用全局缓存：

<keep-alive>
    <router-view></router-view>
 </keep-alive>

使用keep-alive后可以直接引用并调用的函数

1. onActivated: 当一个组件被激活时（比如通过v-if指令或者路由切换），onActivated钩子函数会被调用。
2. onDeactivated: 当一个组件被切换出去时（比如通过v-if指令或者路由切换），onDeactivated钩子函数会被调用。

这两个钩子函数对于管理缓存组件的状态非常有用。例如，你可能想要在组件被激活时刷新数据，在组件被停用时停止某些活动（如定时器）。