方法一:动态组件
1.在App.vue根组件中引入子组件
import HelloWorld from "./components/HelloWorld.vue";
import student from "./components/student.vue";
import teacher from "./components/teacher.vue";
2.在component属性中添加组件
export default {
name: "App",
data() {
return {
};
},
components: {
HelloWorld,
student,
teacher,
},
};
3.添加动态组件,并设置变量值
<component :is="currentCom"></component>
data() {
return {
currentCom: HelloWorld,
};
},
4.给三个按钮绑定点击事件
<button @click="currentCom = 'HelloWorld'">HelloWorld</button>
<button @click="currentCom = 'student'">student</button>
<button @click="currentCom = 'teacher'">teacher</button>
方法二:路由
1.安装路由
cnpm install vue-router
2.定义路由
创建router文件夹,在router内创建index.js文件
import Vue from 'vue';
import Router from 'vue-router';
import student from '../components/student.vue'
import teacher from '../components/teacher.vue'
Vue.use(Router);
export default new Router({
mode: 'history',
routes: [{
path: '/student',
component: student
}, {
path: '/teacher',
component: teacher
}]
});
3.挂载/注入main.js
// 默认引入index文件
import router from './router'
new Vue({
router
})