显眼包路由函数

路由的钩子函数

全局守卫(全局影响)

  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: 当组件被切换出去,进入非激活状态时调用。

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

相关推荐
Devil枫24 分钟前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦1 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子2 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山2 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享2 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
程序媛小果2 小时前
基于java+SpringBoot+Vue的旅游管理系统设计与实现
java·vue.js·spring boot
从兄3 小时前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript
凉辰4 小时前
设计模式 策略模式 场景Vue (技术提升)
vue.js·设计模式·策略模式
清灵xmf4 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
大佩梨4 小时前
VUE+Vite之环境文件配置及使用环境变量
前端