=> 通过 commponent 创建动态组件
:is 属性判断加载的组件 ,通过 keep-alive 实现组件内的数据被缓存 <template> keep-alive component(:is="who") // 通过 @click="who='home'" 判断加载的组件 ul li(@click="who='home'") 首页 li(@click="who='list'") 列表页 li(@click="who='cart'") 购物车页面 </template>
引入组件
<script> import home from "./keep-alive/alive.vue" import list from "./keep-alive/index.vue" import cart from "./keep-alive/keep-alive.vue" export default { components: { home, list, cart }, data() { return { who: 'home' } } } </script>