vue3登录页面，登陆成功后，跳转页面

在Vue3中创建一个登录页面，当用户输入正确的用户名和密码并点击登录按钮后，通常会通过axios或fetch等HTTP库发送请求到服务器验证登录信息。如果验证成功，你可以利用`this.$router.push()`或`this导航守卫`来实现页面跳转。

下面是一个简单的示例：

<template>
  <div>
    <form @submit.prevent="handleSubmit">
      <input v-model="username" placeholder="用户名">
      <input type="password" v-model="password" placeholder="密码">
      <button type="submit">登录</button>
    </form>
    <transition name="fade" v-if="isLoading">
      <p>Loading...</p>
    </transition>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import axios from 'axios';

export default {
  data() {
    return {
      username: '',
      password: '',
      isLoading: false,
    };
  },
  methods: {
    handleSubmit(e) {
      e.preventDefault();
      
      this.isLoading = true;
      axios.post('/api/login', { username: this.username, password: this.password })
        .then(response => {
          if (response.data.success) {
            // 登录成功，跳转
            this.$router.push('/dashboard');
          } else {
            this.errorMsg = response.data.message; // 显示错误消息
          }
          this.isLoading = false;
        })
        .catch(error => {
          console.error('Login error:', error);
          this.isLoading = false;
        });
    },
  },
  created() {
    onMounted(() => {
      // 防止表单提交时默认刷新页面
      document.querySelector('form').addEventListener('submit', e => e.preventDefault());
    });
  },
};
</script>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s ease;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

在这个例子中，当登录请求成功，我们调用了`this.$router.push('/dashboard')`，这将用户导向`/dashboard`路由。如果登录失败，可以根据服务器返回的信息更新UI。