vue实现两个登录页面

路由配置

在Vue项目中，通过Vue Router可以轻松实现多个登录页面的切换。需要定义两个不同的路由路径，分别指向不同的登录组件。

// router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import LoginA from '@/views/LoginA.vue'
import LoginB from '@/views/LoginB.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/login-a',
      name: 'LoginA',
      component: LoginA
    },
    {
      path: '/login-b',
      name: 'LoginB',
      component: LoginB
    }
  ]
})

动态组件切换

在同一个路由路径下，可以通过动态组件的方式切换两个登录表单。使用Vue的<component>标签结合v-bind:is实现动态渲染。

<template>
  <div>
    <button @click="currentComponent = 'LoginA'">显示登录A</button>
    <button @click="currentComponent = 'LoginB'">显示登录B</button>
    <component :is="currentComponent" />
  </div>
</template>

<script>
import LoginA from '@/components/LoginA.vue'
import LoginB from '@/components/LoginB.vue'

export default {
  components: { LoginA, LoginB },
  data() {
    return {
      currentComponent: 'LoginA'
    }
  }
}
</script>

条件渲染

使用v-if和v-else指令根据条件显示不同的登录表单。这种方法适合简单的切换场景。

<template>
  <div>
    <button @click="showLoginA = !showLoginA">切换登录表单</button>
    <LoginA v-if="showLoginA" />
    <LoginB v-else />
  </div>
</template>

<script>
import LoginA from '@/components/LoginA.vue'
import LoginB from '@/components/LoginB.vue'

export default {
  components: { LoginA, LoginB },
  data() {
    return {
      showLoginA: true
    }
  }
}
</script>

路由参数控制

通过路由参数决定显示哪个登录页面，在路由配置中添加参数，在组件中根据参数值渲染不同内容。

// router/index.js
{
  path: '/login/:type',
  name: 'Login',
  component: LoginWrapper
}

<!-- LoginWrapper.vue -->
<template>
  <div>
    <LoginA v-if="$route.params.type === 'a'" />
    <LoginB v-else-if="$route.params.type === 'b'" />
  </div>
</template>

状态管理控制

对于复杂场景，可以使用Vuex管理当前显示的登录页面状态，实现跨组件共享状态。

// store/index.js
export default new Vuex.Store({
  state: {
    loginType: 'A'
  },
  mutations: {
    setLoginType(state, type) {
      state.loginType = type
    }
  }
})

<template>
  <div>
    <button @click="$store.commit('setLoginType', 'A')">显示A</button>
    <button @click="$store.commit('setLoginType', 'B')">显示B</button>
    <LoginA v-if="$store.state.loginType === 'A'" />
    <LoginB v-else />
  </div>
</template>