Layout

技术点

keep-alive

介绍

Layout 组件为 底部导航菜单 关联的四个页面的容器，这四个页面会通过 keep-alive 进行缓存，以提升用户体验。

注意点

由于页面使用了 keep-alive，页面被缓存后再次访问时不会触发 mounted ，需要使用 activated

源码

<template>
  <div class="wrapper">
    <!-- 内容 -->
    <keep-alive include="Home,Movies,Videos,Profile">
      <router-view />
    </keep-alive>

    <!-- 底部导航菜单 -->
    <bottom-bar />
  </div>
</template>

<script>
import BottomBar from "@/components/BottomBar";
export default {
  name: "Layout",
  components: {
    BottomBar,
  },
};
</script>