VUE的几种路由钩子

最新推荐文章于 2024-04-12 15:41:43 发布

swx980

最新推荐文章于 2024-04-12 15:41:43 发布

阅读量778

点赞数 2

分类专栏： VUE 文章标签： vue.js

本文链接：https://blog.csdn.net/swx999/article/details/107763513

版权

33 篇文章 0 订阅

订阅专栏

在main.js中写入：

beforeEach（（to,from,next）=>{ }）：全局前置守卫

Router.beforeEach((to,from,next)=>{
      ......
})

afterEach（（to,from）=>{ }）：全局后置钩子

Router.afterEach((to,from)=>{
      ......
})

在路由配置中定义的钩子

beforeEnter

{
  path:"/home",
  component:resolve=>require(["../components/home.vue"],resolve),
  beforeEnter:(to,from,next)=>{
      ......
  }
}

beforeLeave

{
  path:"/home",
  component:resolve=>require(["../components/home.vue"],resolve),
  beforeLeave:(to,from,next)=>{
      ......
  }
}

在路由组件里定义的导航钩子

beforeRouteLeave

 methods:{
      beforeRouteLeave(to,from,next){
            .......
      }
  }

beforeRouteEnter

 methods:{
      beforeRouteEnter(to,from,next){
            .......
      }
  }

beforeRouteUpdate

 methods:{
      beforeRouteUpdate(to,from,next){
            .......
      }
  }

钩子参数：

参数	说明
to：Route	即将要进入的目标路由对象
from：Route	当前导航正要离开的路由
next：Function	这是一个必须需要调用的方法，执行效果依赖 next 方法的调用参数。

next的参数：

参数	说明
next()	进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed （确认的）
next（false）	中断当前的导航。如果浏览器的 URL 改变了（可能是用户手动或者浏览器后退按钮），那么 URL 地址会重置到 from 路由对应的地址
next（‘/’）	或者 next({ path: ‘/’ }): 跳转到一个不同的地址，当前的导航被中断，然后进行一个新的导航

关注