显眼包路由函数

路由的钩子函数

全局守卫(全局影响)

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

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

相关推荐
前端百草阁18 分钟前
【TS简单上手,快速入门教程】————适合零基础
javascript·typescript
彭世瑜19 分钟前
ts: TypeScript跳过检查/忽略类型检查
前端·javascript·typescript
FØund40420 分钟前
antd form.setFieldsValue问题总结
前端·react.js·typescript·html
Backstroke fish20 分钟前
Token刷新机制
前端·javascript·vue.js·typescript·vue
zwjapple20 分钟前
typescript里面正则的使用
开发语言·javascript·正则表达式
小五Five21 分钟前
TypeScript项目中Axios的封装
开发语言·前端·javascript
小曲程序21 分钟前
vue3 封装request请求
java·前端·typescript·vue
临枫54122 分钟前
Nuxt3封装网络请求 useFetch & $fetch
前端·javascript·vue.js·typescript
RAY_CHEN.23 分钟前
vue3 pinia 中actions修改状态不生效
vue.js·typescript·npm
酷酷的威朗普23 分钟前
医院绩效考核系统
javascript·css·vue.js·typescript·node.js·echarts·html5