Vue系列教程（22）- 路由钩子

1. 引言

通过前面的章节，我们知道了如何定义404页面 ，有兴趣的同学可以参阅下：

• 《Vue系列教程（01）- 前端发展史》
• 《Vue系列教程（02）- Vue环境搭建、项目创建及运行》
• 《Vue系列教程（03）- Vue开发利器VsCode》
• 《Vue系列教程（04）- VsCode断点调试》
• 《Vue系列教程（05）- 基础知识快速补充（html、css、js）》
• 《Vue系列教程（06）- Vue调试神器（vue-devtools）》
• 《Vue系列教程（07）- Vue第一个程序（MVVM模式的引入）》
• 《Vue系列教程（08）- 基本语法》
• 《Vue系列教程（09）- 事件绑定》
• 《Vue系列教程（10）- Model数据内容双向绑定》
• 《Vue系列教程（11）- 组件详解》
• 《Vue系列教程（12）- Axios异步通信》
• 《Vue系列教程（13）- 计算属性（computed）》
• 《Vue系列教程（14）- 插槽（slot）》
• 《Vue系列教程（15）- 事件内容分发（$emit）》
• 《Vue系列教程（16）- 模块打包器（webpack）》
• 《Vue系列教程（17）- 路由（vue-router）》
• 《Vue系列教程（18）- 集成UI框架（ElementUI）》
• 《Vue系列教程（19）- 嵌套路由（ElementUI）》
• 《Vue系列教程（20）- 参数传递（:to）》
• 《Vue系列教程（21）- 自定义404页面&路由模式》

本文主要讲解的是路由钩子。

2. 路由钩子

在vue的官方文档，可以看到vue的声明周期图，如下：

可以知道，在生命周期的每一个步骤里，都有一个方法会自动回调进入，这就是所谓的 “钩子”，当然，路由也是有钩子的。

接下来主要讲解两个常用的与路由相关的钩子函数：

• beforeRouteEnter：在进入路由前执行
• beforeRouteLeave：在离开路由前执行

3. 案例

现在有个需求，就是进入个人信息页面（Profile.vue）之前和之后，执行一些操作，那么该如何做呢？

我们可以在Profile.vue里面定义两个钩子方法，如下：

export default {
  props:['id'],
  name: "UserProfile",
  beforeRouteEnter: (to, from, next) => {
    console.log("准备进入个人信息页");
    next();
  },
  beforeRouteLeave: (to, from, next) => {
    console.log("准备离开个人信息页");
    next();
  }
}

运行程序，来回切换个人信息的tab，可以看到控制台打印如下内容:

我们可以在进入页面前使用axios通信框架请求网络来获取数据，这里就不再详述了，具体请求的方式可以参考之前的博客《Java程序员从零开始学Vue（12）- Axios异步通信》。

本文完！