vue-router切换，组件不销毁

需求：后台管理系统，切换菜单时需要一部分页面刷新，一部分不刷新（其实就是组件销毁问题）

首先，我们需要在router-view标签外再包上一层标签keep-alive

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

这里使用v-if来判断一下，否则所有的组件都会销毁或者不销毁

其次，需要在router.js配置中添加meta字段 （keepAlive字段默认值是false）

 
        {
          path:'/system', 
          component:system,
          name:'system',
          meta:{ keepAlive: true}
        },
        {
          path:'/log', 
          component:log,
          name:'log',
          meta:{ keepAlive: false}
        },

配置好就可以了。