深入理解vue路由的使用(4)

var Home = Vue.extend({ template: '#home', data: function() { return { msg: 'Hello, vue router!', currentPath: '' } }, route: { data: function(transition){ transition.next({ currentPath: transition.to.path }) } } })

该示例运行效果如下:

深入理解vue路由的使用

 钩子函数(06)

路由的切换过程,本质上是执行一系列路由钩子函数,钩子函数总体上分为两大类:

全局的钩子函数

组件的钩子函数

全局的钩子函数定义在全局的路由对象中,组件的钩子函数则定义在组件的route选项中。

全局钩子函数

全局钩子函数有2个:

beforeEach:在路由切换开始时调用

afterEach:在每次路由切换成功进入激活阶段时被调用

组件的钩子函数

组件的钩子函数一共6个:

data:可以设置组件的data

activate:激活组件

deactivate:禁用组件

canActivate:组件是否可以被激活

canDeactivate:组件是否可以被禁用

canReuse:组件是否可以被重用

切换对象

每个切换钩子函数都会接受一个 transition 对象作为参数。这个切换对象包含以下函数和方法:

transition.to

表示将要切换到的路径的路由对象。

transition.from

代表当前路径的路由对象。

transition.next()

调用此函数处理切换过程的下一步。

transition.abort([reason])

调用此函数来终止或者拒绝此次切换。

transition.redirect(path)

取消当前切换并重定向到另一个路由。

钩子函数的执行顺序

全局钩子函数和组件钩子函数加起来一共8个,为了熟练vue router的使用,有必要了解这些钩子函数的执行顺序。

为了直观地了解这些钩子函数的执行顺序,在画面上追加一个Vue实例:

var well = new Vue({ el: '.well', data: { msg: '', color: '#ff0000' }, methods: { setColor: function(){ this.color = '#' + parseInt(Math.random()*256).toString(16) + parseInt(Math.random()*256).toString(16) + parseInt(Math.random()*256).toString(16) }, setColoredMessage: function(msg){ this.msg += '<p>' + msg + '</p>' }, setTitle: function(title){ this.msg = '<h2>' + title + '</h2>' } } })

well实例的HTML:

<div> {{{ msg }}} </div>

然后,添加一个RouteHelper函数,用于记录各个钩子函数的执行日志:

function RouteHelper(name) { var route = { canReuse: function(transition) { well.setColoredMessage('执行组件' + name + '的钩子函数:canReuse') return true }, canActivate: function(transition) { well.setColoredMessage('执行组件' + name + '的钩子函数:canActivate') transition.next() }, activate: function(transition) { well.setColoredMessage('执行组件' + name + '的钩子函数:activate') transition.next() }, canDeactivate: function(transition) { well.setColoredMessage('执行组件' + name + '的钩子函数:canDeactivate') transition.next() }, deactivate: function(transition) { well.setColoredMessage('执行组件' + name + '的钩子函数:deactivate') transition.next() }, data: function(transition) { well.setColoredMessage('执行组件' + name + '的钩子函数:data') transition.next() } } return route; }

最后,将这些钩子函数应用于各个组件:

var Home = Vue.extend({ template: '#home', data: function() { return { msg: 'Hello, vue router!', path: '' } }, route: RouteHelper('Home') }) var News = Vue.extend({ template: '#news', route: RouteHelper('News') }) var Message = Vue.extend({ template: '#message', route: RouteHelper('Message') }) var About = Vue.extend({ template: '#about', route: RouteHelper('About') })

我们按照以下步骤做个小实验:

1.运行应用(访问/home路径)

2.访问/home/news路径

3.访问/home/message路径

4.访问/about路径

深入理解vue路由的使用

 切换控制流水线

当用户点击了/home/news链接,然后再点击/home/message链接后,vue-router做了什么事情呢?它执行了一个切换管道

深入理解vue路由的使用

如何做到这些呢?这个过程包含一些我们必须要做的工作:

1.可以重用组件Home,因为重新渲染后,组件Home依然保持不变。

2.需要停用并移除组件News。

3.启用并激活组件Message。

4.在执行步骤2和3之前,需要确保切换效果有效——也就是说,为保证切换中涉及的所有组件都能按照期望的那样被停用/激活。

切换的各个阶段

我们可以把路由的切换分为三个阶段:可重用阶段,验证阶段和激活阶段。

我们以home/news切换到home/message为例来描述各个阶段。(以下文字描述参考:

1. 可重用阶段

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wwypfp.html