vue-金沙1005

如何实现这个效果呢？你可能会想到，为home组件的data选项追加一个currentpath属性，然后使用以下方式绑定class。

现在又出现了另一个问题，在什么情况下给currentpath赋值呢？

用户点击v-link的元素时，是路由的切换。

每个组件都有一个route选项，route选项有一系列钩子函数，在切换路由时会执行这些钩子函数。

其中一个钩子函数是data钩子函数，它用于加载和设置组件的数据。

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

该示例运行效果如下：

view demo

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

• 全局的钩子函数
• 组件的钩子函数

全局的钩子函数定义在全局的路由对象中，组件的钩子函数则定义在组件的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  = '
'   msg   '
'
		},
		settitle: function(title){
			this.msg = '
'   title   '
'
		}
	}
})

well实例的html：

	{{{ msg }}}

然后，添加一个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路径

view demo

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

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

1. 可以重用组件home，因为重新渲染后，组件home依然保持不变。
2. 需要停用并移除组件news。
3. 启用并激活组件message。
4. 在执行步骤2和3之前，需要确保切换效果有效——也就是说，为保证切换中涉及的所有组件都能按照期望的那样被停用/激活。

切换的各个阶段

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

我们以home/news切换到home/message为例来描述各个阶段。

（以下文字描述参考：http://router.vuejs.org/zh-cn/pipeline/index.html）

1. 可重用阶段

检查当前的视图结构中是否存在可以重用的组件。这是通过对比两个新的组件树，找出共用的组件，然后检查它们的可重用性（通过 canreuse 选项）。默认情况下， 所有组件都是可重用的，除非是定制过。

2. 验证阶段

检查当前的组件是否能够停用以及新组件是否可以被激活。这是通过调用路由配置阶段的candeactivate 和 canactivate 钩子函数来判断的。

3.激活阶段

一旦所有的验证钩子函数都被调用而且没有终止切换，切换就可以认定是合法的。路由器则开始禁用当前组件并启用新组件。

此阶段对应钩子函数的调用顺序和验证阶段相同，其目的是在组件切换真正执行之前提供一个进行清理和准备的机会。界面的更新会等到所有受影响组件的 deactivate 和 activate 钩子函数执行之后才进行。

data 这个钩子函数会在 activate 之后被调用，或者当前组件组件可以重用时也会被调用。