vue3.0项目中：利用路由实现 -＞ 点击选项卡切换页面

页面切换，也可以称为页签切换。

需要一些vue基础，源代码包含无关代码，未完整贴出，下面代码简单整合一下即可。

关键代码1：导入部分

import { computed, ref } from 'vue';
import video from '../src/components/video.vue';
import people from '../src/components/people.vue';
import load from '../src/components/load.vue'

说明：

        1.ref为基本导入，computed为核心导入，二者都需要；

        2.video，people，load为待切换的页面，自己定义即可，无须雷同；

关键代码2：定义路由

const routes = {
  '/video': video,
  '/people': people,
  '/load': load
}

说明：

        1.路由代码如上，简单不赘述，没使用过的同学，建议先熟悉，后续再深入；

        2.键值，自己设定即可，无须雷同，个人习惯带斜杠；

关键代码3：核心逻辑

const curView = computed(() => {
  if (routeK.value == 'video') {
    return routes['/video']
  } else if (routeK.value == 'people') {
    return routes['/people']
  } else if (routeK.value == 'load') {
    return routes['/load']
  }
})

const routeK = ref('')

function changeContent(param: string) {
  routeK.value = param
}

说明：

        1.curView理解为，代表页面/页签的变量；

        2.看代码，curView会随着routeK的值的改变而改变；

        3.routeK为一个字符串，它的值随着changeContent函数的调用而改变；

        4.最终，curView会随着changeContent函数的调用而改变，也就实现了页面切换；

关键代码4：视图部分

</template>
        <a-menu v-model:selectedKeys="selectedKeys" theme="dark" mode="inline">
          <a-menu-item key="1" @click="changeContent('people')">
            <user-outlined />
            <span>people</span>
          </a-menu-item>
          <a-menu-item key="2" @click="changeContent('video')">
            <video-camera-outlined />
            <span>video</span>
          </a-menu-item>
          <a-menu-item key="3" @click="changeContent('load')">
            <upload-outlined />
            <span>load</span>
          </a-menu-item>
        </a-menu>
        <component :is="curView" />
</template>

说明：

        1.这里使用了ant-design-vue，所以有a-menu之类的标签，不用过多关注，此处可用简单button代替即可；

        2.只需关注@click和component，两个部分；

        3.@click为调用函数，总结：即curView会随着你点击的位置，来改变；

        4.component，通过curView来渲染；

        5.页面由component渲染，即页面会随着你点击的位置，来切换；