Vue-router 钩子函数

路由配置文件中的钩子函数

beforeEnter

beforeEnter 有三个参数：

to: 路由将要跳转的路径信息，信息是包含在对像里边的。

from: 路径跳转前的路径信息，也是一个对象的形式。

next: 路由的控制参数，常用的有next(true)和next(false)。

在路由配置文件（/src/router/index.js）中写钩子函数

image

在控制台查看打印内容

image

写在模板中的钩子函数

beforeRouteEnter

在路由进入前的钩子函数

不！能！获取组件实例 this

因为组件实例还没被创建

beforeRouteUpdate

当前路由改变，该组件被复用时

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

可以访问组件实例 this

beforeRouteLeave

在路由离开前的钩子函数

可以访问组件实例 this

模板中写钩子函数

image

在控制台查看打印内容

进入模板前

image

离开模板前

image

作者：Rising_life
链接：https://www.jianshu.com/p/d1bd564de3dd
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。