Vue路由钩子和Vue生命周期

最新推荐文章于 2024-08-18 16:55:31 发布

可爱的黑山样

最新推荐文章于 2024-08-18 16:55:31 发布

阅读量456

点赞数

分类专栏： Vue-router 生命周期文章标签： vue

本文链接：https://blog.csdn.net/qq_42275614/article/details/108000377

版权

2 篇文章 0 订阅

订阅专栏

1 篇文章 0 订阅

订阅专栏

路由钩子作用是拦截导航，完成跳转或者取消跳转

全局路由
路由跳转前(全局前置守卫)：router.beforeEach((to, from, next) => {...})，beforeEach需要调用next()，如next(false)是中断当前导航；
路由跳转后(全局后置钩子)：router.afterEach((to, from) => {...})，afterEach没有next方法，不能改变导航
v 2.5.0+新增了一个钩子router.beforeResolve((to, from, next) => {...})(全局解析守卫)，在导航被确认前，且组件内守卫和异步路由组件解析完成之后调用；
路由独享
配置路由时添加beforeEnter方法

var routes = [
  {
     path: '/foo',
     name: 'foo',
     component: Foo,
     beforeEnter: (to, from, next) =>{
       next()
     }
  }
]

路由组件钩子
（1）beforeRouterEnter(to, from, next)渲染组件对应路由被confirm前调用；获取不到组件实例的this；在组件beforeCreated之前调用；
（2）beforeRouterUpdate(to, from, next)当前路由改变，但组件复用时调用，如在/foo/1和/foo/2之间切换，会渲染同样的Foo组件；可以访问到组件实例的this；点击更新二级导航时调用；
（3）beforeRouterLeave(to, from, next)导航离开该组件对应路由时调用；可以访问到组件实例的this；离开当前页面之前调用；

每个组件都是独立的。创建、数据初始化、挂载、更新、销毁，是一个组件整个生命周期。

new Vue()构造函数生成Vue实例之后，

beforeCreate
this指向创建的实例，数据observer和事件尚未配置，访问不到methods data computed watch中的方法和数据；
created
可以调用methods 方法，修改data 数据，并且可触发响应式变化等。但未挂载到DOM，访问不了$el属性，$ref属性内容为空；
使用场景：ajax请求获取初始化数据对实例进行初始化预处理等操作。created生命周期之后是无法对挂载实例进行拦截的，如果需要某些数据获取完成才能进入页面，可以在beforeRouteEnter中补充逻辑；
beforeMount
查看实例中有无$el属性，没有需要等待vm.$mount(el)调用，之后会找到相应的template，并编译成相应的render()函数；
mounted
将$el(虚拟)替换成真正的dom，挂载完成，dom树已经完成渲染到页面。即可以通过DOM API获取DOM节点，$ref属性也可以访问；
但在这个阶段改变data的值，相关computed属性会立刻更新；但需要进入到下一次DOM更新才能看到数据变化；
beforeUpdate
beforeUpdate更新的对象是模板，如果发生变化的数据并没有在template中使用，则不会触发该方法；
updated
数据变更导致虚拟DOM重新渲染之后会调用该方法；
beforeDestroy
实例销毁之前调用，仍能访问到this；
destroyed
Vue实例销毁后调用，包括子实例；