Vue2.0生命周期及路由导航守卫

chengjianhua 发布于2019-08-26 13:27 / 2662人阅读

摘要：的生命周期，有的时候还是会不熟悉的样子，找了点相关的文章，然后自己尝试着做了点示例，这里记录下，说不定面试就用上了生命周期的相关图片生命周期及路由的钩子函数实例初始化之后，初始化注入及响应前被调用实例已经创建完成之后被调用，属性已绑定，但还

Vue的生命周期，有的时候还是会不熟悉的样子，找了点相关的文章，然后自己尝试着做了点示例，这里记录下，说不定面试就用上了

1.Vue生命周期的相关图片

2.Vue生命周期及路由的钩子函数

beforeCreate

实例初始化之后，初始化注入(init injections)及响应(reactivity)前被调用

created

实例已经创建完成之后被调用，属性已绑定，但DOM还未生成，$el为undefined
这里要视情况来定，根据你的业务来判断是否可以在这里进行ajax请求

beforeMounted

在这里之前会根据是否有el元素及是否有内置的template模板来进行选择
没有el则在vm.mounted(el)调用之后再往下执行，没有内置的模板则使用外层的template模板
模板编译、挂载之前，此时$el还是undefined

mounted

实例挂载到页面上，此时可以访问$el

beforeDestroy

在组件销毁之前调用，这里依然可以访问$el
这里可以做一些重置的操作，比如清除掉组件中的 定时器 和 监听的dom事件

destroy

组件销毁

路由导航守卫

要调用next()不然页面会卡在中途

beforeRouteEnter

路由进入的时候调用，在组件beforeCreate前
此时还没有组件实例，this为undefined，组件实例还没有被创建
beforeRouteEnter 是支持给 next 传递回调的唯一守卫
对于 beforeRouteUpdate 和 beforeRouteLeave 来说，this 已经可用了，所以不支持传递回调

beforeRouteUpdate

在当前路由改变，但是该组件被复用时调用
对于一个带有动态参数的路径 /index/:id，在 /index/1 和 /index/2 之间跳转的时候
由于会渲染同样的 Index 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用

beforeRouteLeave

离开守卫通常用来禁止用户在还未保存修改前突然离开,该导航可以通过 next(false) 来取消

3.示例代码

我这里是用了webpack打包来做的，并没有用new Vue来新建

输出图片

路由为/routerIndex时

当组件被复用时，路由为/routerIndex?id=1

离开当前路由时

正在努力学习中，若对你的学习有帮助，留下你的印记呗（点个赞咯^_^）

往期好文推荐：

判断iOS和Android及PC端

纯css实现瀑布流（multi-column多列及flex布局）

实现单行及多行文字超出后加省略号

微信小程序之购物车和父子组件传值及calc的注意事项

GPU云服务器云服务器服务器生命周期及利旧 vue2.0 cdn 生命周期软件生命周期

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/108849.html

VUE2.0学习笔记

摘要：添加事件侦听器时使用模式。只当事件是从侦听器绑定的元素本身触发时才触发回调。差别在哪里将特性名转换为从开始支持语法糖，会扩展成一个更新父组件绑定值的侦听器。如果需要条件渲染多个元素，可以使用包裹。 1.前言安装直接用引入（本地或者cdn） npm npm install vue vue-cli官方脚手架 # 全局安装 vue-cli $ npm install --glo...

pumpkin9 2019-08-23 14:38 评论0 收藏0
JS每日一题：Vue-router有哪些钩子？使用场景？

摘要：问有哪些钩子使用场景的实现可以点这里前面我们用大白话讲过什么是钩子，这里在重复一下，就是在什么什么之前什么什么之后英文叫专业点叫生命周期，装逼点可以叫守卫中也存在钩子的概念分为三步记忆全局守卫路由独享守卫组件独享守卫全局守卫很好理解，全 20190218问 Vue-router有哪些钩子？使用场景？ router的实现可以点这里前面我们用大白话讲过什么是钩子，这里在重复一下，就是在...

张金宝 2019-08-23 15:18 评论0 收藏0
vue总结

摘要：用创建好的实例调用守卫中传给的回调函数。注册一个全局守卫。这和类似，区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用仅代表个人见解，能力有限，如有错误会误人子弟的地方欢迎留言指出谢谢原文地址 vue(前端框架)解决了什么问题？现在的前端页面元素越来越多，结构也变得越来越复杂,当数据和视图混合在一起的时候对它们的处理会十分复杂，同时也很容易出现错...

Youngs 2019-08-23 18:38 评论0 收藏0
React vs Vue 特性总结

摘要：使用组件当成标签的形式放在结构中，例如或。子组件通知父组件给子组件传递一个回调函数，在子组件中执行时，填入实参。生命周期钩子函数挂载更新销毁。组件内部的状态监听数据变化导航守卫全局组件内路由独享。给子组件定制结构不能给子组件定制结构。用 react 和 vue 开发过项目后，我有一点儿心得，对二者的特性进行一个对比，能够发现一些同异之处。这是我在思否写的第一篇文章，如果哪里写得不对，...

waltr 2019-08-23 13:45 评论0 收藏0
前端面试必问题答疑（2）

摘要：解决了组件之间同一状态的共享问题。当我们的应用遇到多个组件之间的共享问题时会需要状态管理核心状态管理有个核心，分别是以及。当错误出现时，我们现在也会有一个记录之前发生了什么。此外，每个实例组件仍然可以拥有和管理自己的私有状态一，css部分 1，简单介绍下css权重优先级：默认样式 .father{ width:300px; ...

wuyangchun 2019-08-02 16:16 评论0 收藏0