Vue-Router模式和钩子的用法

const router = new VueRouter({
 routes: [
  {
   path: '/foo',
   component: Foo,
   beforeEnter: (to, from, next) => {
    // ...
   },
   beforeLeave: (to, from, next) => {
    // ...
   }
  }
 ]})

组件内钩子

首先看一下官方定义：

你可以在路由组件内直接定义以下路由导航钩子

beforeRouteEnter
beforeRouteUpdate (2.2 新增)
beforeRouteLeave

路由组件!路由组件!路由组件!重要的事情说三遍，大家一定要注意这里说的是“路由组件”，而路由组件！== 组件，路由组件！== 组件，路由组件！== 组件！之前一直没注意这点，然后在子组件里面傻乎乎的调钩子函数发现一直没用。。。

我们先来看一下什么是路由组件？

路由组件：直接定义在router中component处的组件

也就是说router中定义的入口vue文件之外的组件，是没有钩子函数的，也就不用说使用了。但是如果你使用了并不会报错，只是没反应。（本想画个图的，太懒了。。。自己理解理解吧，很好理解的）

这里再回头看下这个路由内钩子是怎么用的，很简单和data、method平级的方法

beforeRouteLeave(to, from, next) {
  // ....
  next()
},
beforeRouteEnter(to, from, next) {
  // ....
  next()
},
beforeRouteUpdate(to, from, next) {
  // ....
  next()
},
computed: {},
method: {}

三种路由钩子中都涉及到了三个参数，这里直接上官方介绍吧

to: Route: 即将要进入的目标 路由对象
from: Route: 当前导航正要离开的路由
next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed （确认的）。
next(false): 中断当前的导航。如果浏览器的 URL 改变了（可能是用户手动或者浏览器后退按钮），那么 URL 地址会重置到 from 路由对应的地址。
next(‘/’) 或者 next({ path: ‘/’ }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。

模式和钩子基本就到这了，有需要的可以在仔细研究一个官当的文档。以上仅是个人学习使用过程的一些理解，希望对大家的学习有所帮助，也希望大家多多支持软件开发网。