vue3实现登录注册切换tab

Vue 3实现登录注册切换tab可以使用Vue Router和Vue的数据绑定机制来实现。

首先，需要安装和配置Vue Router。在项目中安装Vue Router，并在main.js文件中导入和使用Vue Router。

// main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

createApp(App).use(router).mount('#app')

接下来，需要创建登录和注册组件。可以分别创建Login.vue和Register.vue组件。

// Login.vue

<template>
  <div>
    <h2>登录</h2>
    <!-- 登录表单 -->
  </div>
</template>

<script>
export default {
  name: 'Login',
}
</script>

// Register.vue

<template>
  <div>
    <h2>注册</h2>
    <!-- 注册表单 -->
  </div>
</template>

<script>
export default {
  name: 'Register',
}
</script>

然后，在App.vue组件中创建导航菜单和切换tab的功能。使用Vue的数据绑定机制来切换tab。

// App.vue

<template>
  <div>
    <nav>
      <ul>
        <li @click="activeTab = 'login'" :class="{ active: activeTab === 'login' }">登录</li>
        <li @click="activeTab = 'register'" :class="{ active: activeTab === 'register' }">注册</li>
      </ul>
    </nav>

    <router-view :tab="activeTab" />
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      activeTab: 'login',
    }
  },
}
</script>

最后，在router.js文件中配置路由。

// router.js

import { createRouter, createWebHistory } from 'vue-router'
import Login from './Login.vue'
import Register from './Register.vue'

const routes = [
  {
    path: '/login',
    component: Login,
  },
  {
    path: '/register',
    component: Register,
  },
]

const router = createRouter({
  history: createWebHistory(),
  routes,
})

export default router

完成以上步骤后，就可以根据点击导航菜单来切换登录和注册页面的tab了。点击导航菜单时，会触发activeTab的值改变，从而切换显示的组件。同时，Vue Router会根据路由的配置来加载相应的组件，实现路由切换的效果。