显眼包路由函数

路由的钩子函数

全局守卫(全局影响)

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

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

相关推荐
挖稀泥的工人2 分钟前
面试看这一篇webpack
前端·webpack
卖报的小行家_4 分钟前
Vue3源码,拦截对象,对比Vue2
前端
蒜香拿铁7 分钟前
vue3自动导入组合式api
前端·javascript
日升7 分钟前
Chrome 134 版本开发者工具(DevTools)更新内容
前端·chrome·浏览器
Mike_jia8 分钟前
一篇文章带你了解一款强大的本地镜像库系统---Harbor
前端
_一条咸鱼_9 分钟前
Vue 框架组件模块之弹窗组件深度剖析(四)
前端
frontDeveloper9 分钟前
JavaScript基础知识概览(DOM-API部分)
javascript
某哈压力大9 分钟前
制作一个简单的水印组件
前端·vue.js
小old弟10 分钟前
Git简明指南:从入门到基本操作
前端·git
Cutey91611 分钟前
解决在 UniApp 中,deep不生效的问题
前端·javascript·面试