一、<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
。