控制VUE路由组件的keep-alive

在项目制作中，针对一些列表页我们往往会使用keep-alive来保持路由组件的状态，这样做的目的是当我们从列表页面进入详情页面再返回的时候，列表页的组件状态以及数据能保持离开前的状态，避免一些状态丢失以及减少数据的请求。

---

router.meta

早期，我往往会使用router中的meta属性来控制当前路由组件是否需要保持状态，具体会在路由控制的index.js里写上如下代码：

export default new Router[{
    routes: [{
        path: '/list',
        name: 'list',
        meta: {
            keepAlive: true  // true为保持状态
        }
    }]
}]

然后在App.vue文件的router入口写上调用方式：

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

---

include（推荐）

在使用meta控制的时候，我感觉如果路由组件需要动态更新并不是很理想，即某些时候我需要动态添加该组件需要保持状态或者需要注销该组件。

现在官方提供了include和exclude能让我们能更加友好的动态更新组件的keep-alive状态。官方keep-ailve文档

在我的具体项目中，我会按如下方式使用，以include为例

定义默认需要keep-alive的组件

首先我会在vuex里面定义我需要默认使用keep-alive的组件名称（如果你不使用vuex，就是在能全局调用的状态管理里定义，依据自己的项目而定）

aliveRouter: ['list']

需要特别注意的是：定义的名称是组件的名称，不是路由的名称！

即，假如我有一个路由组件OrderList，我的vue文件这样写

...
export default {
    name: 'orderList'
}

然后路由router.js这样定