vue路由keep-alive

  keep-alive会把其包裹的所有组件都缓存起来

1.在App.vue写2个router-view出口

//需要缓存的<keep-alive>  
　　<router-view  v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
//不需要缓存的
<router-view v-if="!$route.meta.keepAlive"></router-view>

2.在Router里定义好需要缓存的视图组件

   keepAlive: true

}
const index = {
    path: `/index`,
    name: '首页',
    meta: {
        title: '上饶美术馆',
        keepAlive: true
    },
    component: () =>
        import ('../views/index.vue'),
}

3.keep-alive生命周期

   页面生命周期钩子如上面的代码所示，这四个是最常用到的部分。这部分需要注意下，当引入keep-alive的时候，页面第一次进入，钩子的触发顺序created-> mounted-> activated，退出时触发deactivated。当再次进入（前进或者后退）时，只触发activated。

    created: function () {
      console.log(1)
    },
    mounted: function () {
      console.log(2)
    },
    activated: function () {
      console.log(3)
    },
    deactivated: function () {
      console.log(4)
    }

4.在组件页面监听路由变化

   4.1. 首先watch是组件的一个属性，能监听到的前提是这个组件没有被销毁；
   4.2. watch在父子路由间不会出现监听不到路由变化这种情况；
   4.3. 监听不到是因为组件被销毁了，解决这种方法是在router-view外面， 加一层标签keep-alive标签；
   4.4. keep-alive存在的意义就是使组件不被销毁；

 watch:{
  $route(to,from){
       //to 新路由
      //from 老路由
  }
}
组件内也可以直接$route.name获取当前路由名称 $route.path获取当前路由路径

5.keep-alive不生效问题

   如果组件的name和router配置的name不一样，也可能导致keep-alive无法生效，所以要如下配置成一样：
  组件内name命名：

export default {
     name: 'volunteerHome'
}

  路由内name命名：

{
        path: `/volunteer/home`,
        name: 'volunteerHome',
        redirect: '/volunteer/home/rule',
        meta: {
            title: '志愿者之家-上饶美术馆',
            keepAlive: true
        },
        component: () =>
            import ('../views/volunteer/volunteerHome.vue'),
    }

6.二级路由keep-alive不生效问题

  keep-alive只对当前router-view 有效
  app.vue下的一级路由

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

  所以某组件下的二级路由如果想keep-alive生效，还需要在该组件内对router-view在包一层keep-alive：

<template>
           <keep-alive>  
                  <router-view></router-view>
             </keep-alive>
</template>