显眼包路由函数

路由的钩子函数

全局守卫(全局影响)

  1. router.beforeEach : 这是最常用的全局守卫,它会在路由跳转之前被调用。可以用来做一些如身份验证、日志记录、设置页面标题等全局性的事务处理。该函数接收三个参数to, from, next,其中to表示即将进入的目标路由对象,from表示离开的路由对象,而next是一个函数,调用next()则进入下一个钩子(如果有的话)或者确认导航的有效性。
js 复制代码
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相同。
js 复制代码
const routes = [
    
    {
        path: '/about',
        name: 'About',
        compoent: () => import('../views/About.vue'),
        //独享守卫
         beforeEnter:(to,from,next)=>{
             next()
         }
    }
]

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

  1. onBeforeRouteEnter
  • 作用:在路由进入该组件之前调用,此时组件实例还没有被创建。

  • 应用场景

    • 验证用户权限,决定是否允许用户进入该页面。
    • 提前进行数据预加载,以便在进入页面时快速渲染。
    • 设置页面级别的元信息,如标题。
  1. onBeforeRouteUpdate
  • 作用 :在当前路由改变,但该组件被复用时调用(例如,当路由参数改变时,比如从 /user/1/user/2)。

  • 应用场景

    • 根据新的路由参数更新页面内容。
    • 重新获取数据,确保显示的内容是最新的。
  1. onBeforeRouteLeave
  • 作用:在离开该组件的对应路由时调用。

  • 应用场景

    • 阻止意外导航(例如,表单未保存时警告用户)。
    • 执行清理操作,如取消事件监听器或定时器。
    • 保存组件状态,以便下次返回时可以恢复。
vue.js 复制代码
  //离开页面
  onBeforeRouteLeave((to, from, next) => {
    console.log(to, from);
    const flag = window.confirm('你确定要离开这个页面吗?')
    if (flag) {
      next()
    }
  })

keep-alive

<keep-alive>是Vue提供的一个抽象组件,用于保存组件状态或避免重新渲染。 可以直接调用的函数

  1. onActivated : 当组件被<keep-alive>缓存的组件激活时调用。
  2. deactivated: 当组件被切换出去,进入非激活状态时调用。

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

相关推荐
天天扭码8 分钟前
深入讲解Javascript中的常用数组操作函数
前端·javascript·面试
猿究院_xyz9 分钟前
跟着尚硅谷学vue-day5
前端·javascript·vue.js·前端框架·html
小杰love编程12 分钟前
Django 入门指南:构建强大的 Web 应用程序
前端·django·sqlite
~heart将心比心14 分钟前
chrome://inspect/#devices 调试 HTTP/1.1 404 Not Found 如何解决
前端·chrome
黄蘑菇20 分钟前
Vue 路由组件复用不触发生命周期钩子问题及解决方案
前端
嘻嘻嘻嘻嘻嘻ys21 分钟前
《Spring Boot 3 + Java 17:响应式云原生架构深度实践与范式革新》
前端·后端
Mike_jia23 分钟前
Glances:开源跨平台监控工具的终极指南
前端
前端太佬28 分钟前
从拧螺丝到造火箭:Git高阶玩家生存报告
前端·git·github
前端太佬28 分钟前
从青铜到塑料:Git逃难指南(附救命指令大全)
前端·git·github