在日常开发中，通常实现页面跳转是通过路由实现的，那么不利用路由能否实现这个功能呢？当然可以，看操作。
我期望实现是这样的效果，点击资料设置，右侧会显示资料设置页面，点击修改密码 ，右侧会显示修改密码页面
合理运用v-if完美实现
<template><div class="wrapper"><div class="wrapper_content"><div class="tab_title"><ul><li @click="tab=0" :class="{tab_active:tab==0}">资料设置</li><li @click="tab=1" :class="{tab_active:tab==1}">修改密码</li></ul></div><div class="content"><div class="tab_content" v-if="tab==0"><UserSet /> //这里是组件</div><div class="tab_content" v-else-if="tab==1"><UserPass /> //这里是组件</div></div></div></div></template><script>import UserSet from '@/components/user/UserSet.vue';import UserPass from '@/components/user/UserPass.vue';export default {data() {return {tab: 0 //默认选中第一个tab};},components: { UserSet, UserPass }};</script><style scoped>.wrapper {width: 100%;height: 100%;background-color: white;background-position: center;display: flex;justify-content: center;margin-left: 10px;margin-top: 10px;border-radius: 5px;padding: 30px;box-shadow: -2px 0px 3px 0px rgba(118, 118, 118, 0.2);}.wrapper_content {width: 1236px;height: 100%;display: flex;justify-content: flex-start;}.tab_title {width: 261px;height: 100%;}.tab_title>ul {margin: 0;padding: 0;list-style: none;margin: 0 auto;width: 200px;height: 100px;display: flex;flex-direction: column;}.tab_title>ul>li {flex-grow: 1;width: 100%;text-align: center;height: 50px;line-height: 50px;display: flex;font-size: 14px;justify-content: center;}.tab_title>ul>li:hover {cursor: pointer;}.tab_title .tab_active {cursor: pointer;background: linear-gradient(to right top, #F0F6FF, #F0F6FF);color: #333333;border: 0;}.content {margin-left: 1px;width: 976px;height: 100%;}.tab_content {width: 100%;height: 100%;}</style>
这样就可以实现不使用路由，切换页面了
