[Vue]组件——实现动态组件：keep-alive的使用

 

1.在app.vue中用一个 <keep-alive> 元素将其动态组件包裹起来：

keepAlive为true时，第一次被创建的时候缓存下来,为false时，不会缓存

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

 

2.在routes.js为每个模块定义是否在内存常驻中：

 

 {
    path: '/test',
    name: 'test',
    component: require('@views/test').default,
    // 下行代码为按需加载的写法
    // component: () => import('@views/test1'),
    meta: {
      authRequired: true,
      // 下行代码为true的时候，该模块常驻内存
      keepAlive: false,
    },
  },

3.在main.js中引入app.vue与routes.js：

import App from './app'
import router from '@router'

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')