Vue，在vue-cli上进行组件页面切换

进行组件切换的两种方法：

一.动态组件

1.在components内自定义两个子组件并载入到根组件上
student.vue:

<template>
  <div id="student">
    <h3>student list</h3>
    <ul>
      <li v-for="(item, index) in students" :key="index">
        {{ item }}
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: "student",
  data() {
    return {
      students: [
        {
          id: 1,
          name: "lisi",
          age: 12,
        },
        {
          id: 2,
          name: "xiaohong",
          age: 11,
        },
        {
          id: 1,
          name: "zhangsan",
          age: 13,
        },
      ],
    };
  },
  methods: {},
};
</script>
<style scoped>
</style>
    

teacher.vue

<template>
  <div id="teacher">
    <h3>teacher-list</h3>
    <ul>
      <li v-for="item in teachers" :key="item.id">
        {{ item }}
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: "teacher",
  data() {
    return {
      teachers: [
        {
          id: 1,
          name: "lisi-teacher",
          age: 22,
        },
        {
          id: 2,
          name: "lisi-teacher",
          age: 25,
        },
        {
          id: 3,
          name: "lisi-teacher",
          age: 20,
        },
      ],
    };
  },
  methods: {},
};
</script>
<style scoped>
</style>

在app.vue内导入

import student from "./components/student.vue";
import teacher from "./components/teacher.vue";

export default {
  name: "App",
  data() {
    return {
      currentCom: HelloWorld,
    };
  },
  components: {
    HelloWorld,
    student,
    teacher,
  },
};

2.在template内添加一个动态组件，通过点击按钮切换动态组件内载入的内容

<button @click="currentCom = 'student'">student</button>
    <button @click="currentCom = 'teacher'">teacher</button>
    <button @click="currentCom = 'HelloWorld'">hello</button>
    <component :is="currentCom"></component>

打开页面点击按钮就会展现相应子组件

二、使用路由切换

1.在src文件夹下新建一个router文件夹，里面创建一个index.js文件
2.index.js内引入vue+vue-router:

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中：

import router from './router'

在new Vue中注入router

4.-npm run serve 启动项目

如果出现这个报错就按照提示输入npm install --save vue-router下载插件
效果图：