动态组件：如果不想用路由，可以使用动态组件实现组件切换，根据点击按钮获得组件名，可以通过template+v-if实现，也可以通过component标签传递:is="组件名"实现。
// 方法1
<template v-if="checkTabs === 'About'">
<About></About>
</template>
<template v-else-if="checkTabs === 'Category'">
<Category></Category>
</template>
<template v-else>
<Home></Home>
</template>
// 方法2
// 如果需要父传子子传父，写上对应属性就可以用，父传子会传给所有可能的子组件
// 切换组件的时候 原组件默认是会销毁掉的，所以是存在性能问题的
<component :is="checkTabs"></component>
有时候需要组件缓存保留data不被销毁，就需要使用内置的keep-alive组件包裹components
// 默认缓存全部组件
<keep-alive>
<component :is="checkTabs"></component>
</keep-alive>
// keep-alive的属性：
// include名字匹配的组件缓存，接收string|RegExp|Array
// exclude名字匹配的组件不缓存，接收string|RegExp|Array
// max最多缓存多少个组件，接收number|string
// 需要注意的是，匹配的字段名是组件对应的name属性
<keep-alive include="About,Home">
<component :is="checkTabs"></component>
</keep-alive>
<keep-alive :include="/About|Home/">
<component :is="checkTabs"></component>
</keep-alive>
<keep-alive :include="['About','Home']">
<component :is="checkTabs"></component>
</keep-alive>
