vue keep-alive保存路由状态1 （接下篇）

<keep-alive>
　　<router-view>
　　　　<!-- 这里是会被缓存所有的视图组件 -->
　　</router-view>
</keep-alive>

// 组件 a
export default {
  name: ‘a‘,//先定义好组件名字 才能被缓存
  data () {
    return {}
  }
}
<keep-alive include="a,b">
  <router-view>
    <!-- name 为 a以及b 的组件将被缓存！ -->
  </router-view>
</keep-alive>

<keep-alive exclude="a">
  <router-view>
    <!-- 除了 name 为 a 的组件都将被缓存！ -->
  </router-view>
</keep-alive>

//修改1.在路由表js  增加 router.meta 属性
// routes 配置
export default [
  {
    path: ‘/home‘,
    name: ‘home‘,
    component: Home,
    meta: {
      keepAlive: true // 需要被缓存
    }
  }, {
    path: ‘/edit,
    name: ‘edit‘,
    component: Edit,
    meta: {
      keepAlive: false // 不需要被缓存
    }
  }
]
//修改2.在公共main组件修改 下面是组件里的代码
<keep-alive>
    <router-view v-if="$route.meta.keepAlive">
        <!-- 这里加载会被缓存的视图组件，比如 Home！ -->
    </router-view>
</keep-alive>

<router-view v-if="!$route.meta.keepAlive">
    <!-- 这里加载不被缓存的视图组件，比如 Edit！ -->
</router-view>
//修改3.在

//修改1.在路由表js  增加 router.meta 属性
    // routes 配置
    export default [
    {
        path: ‘/home‘,
        name: ‘home‘,
        component: Home,
        meta: {
        keepAlive: true // 需要被缓存
        }
    }, {
        path: ‘/edit,
        name: ‘edit‘,
        component: Edit,
        meta: {
        keepAlive: false // 不需要被缓存
        }
    }
    ]
//修改2.在要缓存的组件 设置那么属性
　　// 组件 a
　　export default {
  　　name: ‘home‘,//先定义好组件名字 才能被缓存

  　　data () {
    　　return {}
  　　}
　　}