不同的路由共用一个组件component，并用keepAlive实现不同的页面缓存

实现功能：使用列表页面检索的数据跳转到对应的详情页面，从详情页回到列表页能记住上次检索的数据，再次切换到详情页时能正常取到对应的数据

实现方式使用Vue keepAlive实现页面缓存，整理了一些资料和其他的博客在这里记录一下。。。。

keepAlive原理：
1，保留组件的状态，在重新进入页面时避免重新渲染。
2、是抽象组件，它自身不会渲染DOM元素，也不会出现在父组件链中。
3、当组件在 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。

实现
在app.vue中改写router-view

 <keep-alive :include="cachedViews" :exclude="disCachedViews">
    <router-view/>
  </keep-alive>

注意 cachedViews里面存的是由路由name构成的数组，数组的name需与组件的name一致，否词不能达到缓存的效果。
因为这里用的是动态路由，组件的name不能根据路由动态更改，所以用另外一种方式

    <keep-alive>
      <router-view v-if="$route.meta.keepAlive" >
        <!-- 这里是会被缓存的视图组件 -->
      </router-view>
    </keep-alive>

    <router-view v-if="!$route.meta.keepAlive" >
      <!-- 这里是不被缓存的视图组件 -->
    </router-view>

在构建路由时路由元信息meta加上属性keepAlive，为true

这里已经实现了页面缓存的效果，及第一个功能检索的列表页面list.vue进入到详情i页nfo.vue，再切换回到list.vue可以看到已检索的数据列表。

2.打开一个新的详情页，发现数据是上一次打开的页面数据，数据并没有根据路由刷新

因为我们这里做了keepAlive缓存，重新进入页面并不会触发created方法，而且详情页info.vue做了多路由复用同一个组件的情况，不能使用activated（）去触发。
解决这个问题必须解决路由复用问题，使用Vue-router做项目时，会遇到如/info/:id这样只改变id号的场景。由于router-view是复用的，单纯的改变id号并不会刷新router-view

1. 方法一：通过 watch 监听路由

 watch: {
     '$route'(to, from) {
        if (to.path !== from.path) {
          console.log('检测到路由变化')
          // 初始化数据
          this.initData()
        }
      }
    },

2. 方法二：用 :key 来阻止“复用”
   设置key为$route.fullPath之后，由于两个路由的fullPath不同，组件会被强制不复用

	<keep-alive>
      <router-view v-if="$route.meta.keepAlive" :key="$route.fullPath">
        <!-- 这里是会被缓存的视图组件 -->
      </router-view>
    </keep-alive>

    <router-view v-if="!$route.meta.keepAlive" :key="$route.fullPath">
      <!-- 这里是不被缓存的视图组件 -->
    </router-view>

3. 方法三：通过 vue-router 的钩子函数 beforeRouteEnter beforeRouteUpdate beforeRouteLeave

beforeRouteEnter (to, from, next) {

 // 在渲染该组件的对应路由被 confirm 前调用

 // 不！能！获取组件实例 `this`

 // 因为当钩子执行前，组件实例还没被创建

},

beforeRouteUpdate (to, from, next) {

 // 在当前路由改变，但是该组件被复用时调用

 // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，

 // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。

 // 可以访问组件实例 `this`

},

beforeRouteLeave (to, from, next) {

 // 导航离开该组件的对应路由时调用

 // 可以访问组件实例 `this`

}

经过实践，方法二是比较好用的