vue切换不同登录方式页面

在Vue.js中，切换到不同登录方式页面通常涉及到路由管理。你可以使用Vue Router库，它是一个非常流行的前端路由解决方案。以下是一个简单的步骤：

1. 安装Vue Router：

   npm install vue-router

2. 在main.js或入口文件中配置路由器：

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

// 创建路由实例
const router = new Router({
  routes: [
    {
      path: '/login', 
      name: 'Login', 
      component: LoginComponent, // 对应于登录页组件
    },
    {
      path: '/register', 
      name: 'Register', 
      component: RegisterComponent, // 对应于注册页组件
    },
    // 如果有更多登录方式，添加相应的路径和组件
    { path: '/social-auth/:provider', component: SocialAuthComponent } // 社交登录示例，`:provider`是动态匹配参数
  ]
})

// 路由守卫（如权限验证），可以在需要的时候控制导航
router.beforeEach((to, from, next) => {
  // 根据需求实现条件跳转或验证
})

export default router

3. 在Vue组件中通过`this.$router.push`或`<router-link>`标签跳转：

<!-- 使用按钮或链接 -->
<button @click="goToSocialAuth('google')">Google登录</button>
<router-link :to="{ name: 'Login' }">常规登录</router-link>

<script>
methods: {
  goToSocialAuth(provider) {
    this.$router.push(`/social-auth/${provider}`);
  }
}
</script>