一、<component :is="放置组件名"></component>（常用）
我们可以定义一个数据并将该数据作为 component 元素的 is 属性值，这个数据保存了组件的名称，当我们需要切换组件时，只需要改变数据所保存的内容即可。
使用 keep-alive 组件与动态组件结合，可以实现在同一挂载点切换显示不同的组件，并且保持组件的状态。比如说第一个组件做了加法，页面展示了新计算出来的数值，使用 keep-alive 可以使得切换到其他组件后再切回来数值保持不变。
如果想在刷新页面后保持组件不变的话，那就得把数据和组件名这些存起来了。
示例代码如下：
javascript"><template><div class="container"><!-- 使用属性绑定指令将指定的数据绑定到属性中 --><keep-alive><component v-bind:is="show"></component></keep-alive><button @click="transfer()">Transfer</button></div>
</template><script>
// 导入组件
import First from "./dynamicCom/firstAssembly.vue";
import Last from "./dynamicCom/lastAssembly.vue";export default {// 定义数据data() {return {show: "First",};},// 注册组件components: {First,Last,},// 定义事件处理函数methods: {transfer() {if (this.show === "First") {this.show = "Last";} else {this.show = "First";}},},
};
</script><style>
</style>
二、 使用<router-view></router-view>（也常用）
首先要配置路由
javascript">// router.js
import Vue from 'vue';
import Router from 'vue-router';
import ComponentA from './components/ComponentA.vue';
import ComponentB from './components/ComponentB.vue'; Vue.use(Router); export default new Router({ routes: [ { path: '/component-a', name: 'ComponentA', component: ComponentA }, { path: '/component-b', name: 'ComponentB', component: ComponentB } // 可以添加更多的路由配置 ]
});在上面的配置中，我们定义了两个路由，分别对应 ComponentA 和 ComponentB 这两个组件。当访问 /component-a 路径时，ComponentA会被渲染；当访问/component-b路径时，ComponentB会被渲染。
其次在入口文件引入并使用这个路由配置
javascript">// main.js
import Vue from 'vue';
import App from './App.vue';
import router from './router'; // 引入路由配置 new Vue({ router, // 将路由配置注入到Vue实例中 render: h => h(App)
}).$mount('#app');最后试试在根组件 App.vue 中使用 <router-view> 来显示当前路由对应的组件
javascript"><!-- App.vue -->
<template> <div id="app"> // 这里用的是声明式路由，在js中换成编程式路由也是一样的效果<router-link to="/component-a">Go to Component A</router-link> <router-link to="/component-b">Go to Component B</router-link> <router-view></router-view> <!-- 这里会根据当前路由显示对应的组件 --> </div>
</template>在上面的模板中，<router-link>用于创建导航链接，to属性指定了链接的目标路由。<router-view>是一个占位符，它会根据当前的路由动态地渲染对应的组件。
当用户点击“Go to Component A”链接时，URL会变为/component-a，并且ComponentA会被渲染到<router-view>的位置。同样地，点击“Go to Component B”链接会切换到ComponentB。
