vue路由元信息

之前听到路由元信息不明白他是啥，因为太过官方，但是直接说是$router里面的meta相信大家就不陌生了，那这个到底有什么作用呢，今天做个简单总结。

路由缓存

路由缓存这个功能相信在很多项目中都可以用得到，比如在移动端中，列表数据一般没有分页，只有下拉刷新，当我们拉到第二页时，点击列表数据进入详情，推出就会返回到第一页。这时我们就要做一个路由缓存了。
方法：结合keep-alive和router-view

{
	path: '/index',
	name: 'index',
	meta: {
		//使用keepAlive字段控制是否需要缓存
		keepAlive: true
	},
	component: resolve => require(['../views/index'], resolve),
	},

<keep-alive>
	<router-view v-if="$route.meta.keepAlive" />
</keep-alive>
<router-view v-if="!$route.meta.keepAlive" />

验证登陆

在一些商城项目中，查看商品列表或商品详情是不需要进行登陆的，但是在加入购物车或购买时必须验证用户是否登陆，这种情况使用路由卫士进行if判断也是可以的，但是当页面过多时不推荐，所以使用路由元信息可以更加精准简洁的进行判断该页面受否需要登陆。

{
	path: '/index',
	name: 'index',
	meta: {
		//使用ligin字段控制是否需要登陆
		login: true
	},
	component: resolve => require(['../views/index'], resolve),
	},

router.beforeEach((to, from, next) => {
  if (to.meta.login) {
    next('/login')
  } else {
    next()
  }
})

值得注意的是直接判断to.meta.login是不可取的，因为这样仅仅可以拿到路由为/index的to对象，拿不到他的子路由，比如？/index/son，所以理想的方法是使用to.matched方法，他会返回匹配到的路由和子路由的对象数组。

改善如下

router.beforeEach((to, from, next) => {
  let flag = to.matched.some(item => {
  	return item .meta.login
  })
  if(flag) {
  	next('/login')//去登陆
  }else {
  	next()
  }
})

设置title

在项目中，我们都需要给页面添加他独有的title，使用路由元信息+路由卫士可以很方便实现这个功能。

router.beforeEach((to, from, next) => {
	const title = to.meta && to.meta.title;
	if (title) {
		document.title = title;
	}
	next();
});