Vue2组件的生命周期及缓存路由（keep-alive）




<template>
  <div>
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive" />
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive" />
  </div>
</template>
 
<script>
export default {
  name: 'App',
  created() {
    console.log('App组件已创建');
  },
  mounted() {
    console.log('App组件已挂载');
  },
  // 其他生命周期钩子可以根据需要添加
};
</script>

这个例子展示了如何在Vue2应用中使用keep-alive来缓存动态组件，以及如何在App.vue根组件中使用路由元信息来控制是否缓存当前的视图。在<router-view>标签上，我们根据路由元信息$route.meta.keepAlive来决定是否需要缓存当前视图。这样做可以优化用户体验，提高页面加载性能。

Vue2组件的生命周期及缓存路由（keep-alive）

评论已关闭

推荐阅读