vue的路由动画切换页面无法读取meta值的bug

背景

在vue项目的二级路由中，想要通过设置路由表中的meta值，来判断页面的slide-left 和slide-right的方向。

对于从左到右的排列，给routes依次设为1,2,3,4…的值，使其可以通过大小来判断from和to，并显示出不同的划入 / 划出效果

{
	path: 'aaa',
	name: 'aaa',
	component: aaa,
	meta:1
},
{
	path: 'bbb',
	name: 'bbb',
	component: bbb,
	redirect:'bbb/baba',
	meta:2,
	children: [
	{
		path: 'baba',
		name: 'baba',
		component: baba
	}, {
		path: 'ccc',
		name: 'ccc',
		component: ccc
	}, {
		path: 'ddd',
		name: 'ddd',
		component: ddd
	}, {
		path: 'eee',
		name: 'eee',
		component: eee
	}, {
		path: 'fff',
		name: 'fff',
		component: fff
	}],
},
{
	path: 'ggg',
	name: 'ggg',
	meta:4,
	component: ggg
},
{
	path: 'hhh',
	name: 'hhh',
	meta:3,
	component: hhh
},

然鹅，

在设置的过程中，其中一个路由始终无法读到all这个路由中的meta：2
导致切换路由的动画效果出了问题

---

问题原因：

读不到的meta的是因为设置了子路由以及重定向。

---

解决方法

把meta值加在它的子路由上，

{
	path: 'bbb',
	name: 'bbb',
	component: bbb,
	redirect:'bbb/baba',
	//meta:2,
	children: [
	{
		path: 'baba',
		name: 'baba',
		component: baba,
		meta:2
	}, {
		path: 'ccc',
		name: 'ccc',
		component: ccc
	}, {
		path: 'ddd',
		name: 'ddd',
		component: ddd
	}, {
		path: 'eee',
		name: 'eee',
		component: eee
	}, {
		path: 'fff',
		name: 'fff',
		component: fff
	}],
},