一、什么是vue-router中meta属性

简单地说meta就是路由元信息，也就是每个路由身上携带的信息。通过meta对象中的一些属性来判断当前路由是否需要进一步处理，如果需要处理，按照自己想要的效果进行处理。

通常在定义路由的时候配置 meta 字段： 由以下代码也可看出meta的作用之一就是可以动态显式网页标题。

const routes = [
	{
        name:'home',
        path:'/',
        meta:{
            title:'首页'
        },
        component:Home
    },
    {
        name:'login',
        path:'/login',
        meta:{
            title:'登录'
        },
        component:Login
    }
]

二、meta的应用举例

首先我们知道，keep-alive属性具有缓存作用，被keep-alive标签包裹的组件会默认被缓存。如下代码：

<keep-alive>
    <router-view></router-view>
    //多个路由呈现的位置
</keep-alive>

比如有100个组件，其中有一些需要缓存，有一些不需要，那么需要怎么做呢？这时候用meta属性来协助就会方便很多。

<template>
  <div id="app">
      <keep-alive v-if="$route.meta.isKeepAlive">
        <router-view/>
      </keep-alive>
 
      <keep-alive v-if="!$route.meta.isKeepAlive">
        <router-view/>
      </keep-alive>
  </div>
</template>

在router.js中给路由的meta对象添加属性时，可以使用$route.meta.xxx来获取这个属性的状态。在这里，可以使用v-if判断组件是否被缓存。在router.js中的定义如下：

const router = new VueRouter({
    routes:[
        {
            path:'/',
            name:'home',
            component:home,
            meta:{isKeepAlive:true}
        },
        {
            path:'/news',
            name:'news',
            component:news,
            meta:{isKeepAlive:true}
        },
        {
            path:'/play',
            component:play,
            meta:{isKeepAlive:false}
        },
        ......
    ]
})

当isKeepAlive的值为true时，组件会被自动缓存，当isKeepAlive的值为false时，组件默认不被缓存。