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

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的注意事项