求助：Vue Router组件间传递用户凭证的正确实现方式

针对你的需求，这里提供两种无需全局状态管理的实现方案，均基于Vue Router，同时解决你之前用props传递数据的编译问题：

方案一：路由Query参数传递（简单直接） #

这种方式通过URL的query参数传递邮箱和密码，适合对临时数据安全性要求不高的场景。

1. 注册页（Register.vue）实现弹窗与跳转 #

<template>
  <div class="register-page">
    <form @submit.prevent="handleRegister">
      <input v-model="email" type="email" placeholder="邮箱" required>
      <input v-model="name" type="text" placeholder="姓名" required>
      <input v-model="password" type="password" placeholder="密码" required>
      <input v-model="confirmPassword" type="password" placeholder="确认密码" required>
      <button type="submit">注册</button>
    </form>

    <!-- 邮箱已存在提示弹窗 -->
    <div v-if="showExistModal" class="modal-overlay">
      <div class="modal">
        <p>该邮箱已被使用。<span @click="jumpToLogin" class="action-link">*<strong>Sign Up</strong>*</span>以继续。</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const email = ref('')
const name = ref('')
const password = ref('')
const confirmPassword = ref('')
const showExistModal = ref(false)

// 注册请求处理
const handleRegister = async () => {
  try {
    const res = await fetch('/api/register', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        email: email.value,
        name: name.value,
        password: password.value
      })
    })
    if (res.status === 409) { // 假设API返回409表示邮箱已存在
      showExistModal.value = true
    }
  } catch (err) {
    console.error('注册请求失败:', err)
  }
}

// 跳转登录页并传递参数
const jumpToLogin = () => {
  router.push({
    name: 'Login', // 确保登录页路由配置了name为Login
    query: {
      email: email.value,
      password: password.value
    }
  })
  showExistModal.value = false
}
</script>

<style scoped>
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal {
  background: #fff;
  padding: 24px;
  border-radius: 8px;
}
.action-link {
  color: #2563eb;
  cursor: pointer;
  text-decoration: underline;
}
</style>

2. 登录页（Login.vue）接收并填充参数 #

如果想用props接收，需要先配置路由：

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

const routes = [
  {
    path: '/login',
    name: 'Login',
    component: Login,
    // 将query参数转为组件props
    props: route => ({
      email: route.query.email,
      password: route.query.password
    })
  },
  {
    path: '/register',
    name: 'Register',
    component: Register
  }
]

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

export default router

然后登录页通过props接收参数：

<template>
  <div class="login-page">
    <form @submit.prevent="handleLogin">
      <input v-model="email" type="email" placeholder="邮箱" required>
      <input v-model="password" type="password" placeholder="密码" required>
      <button type="submit">登录</button>
    </form>
  </div>
</template>

<script setup>
import { ref } from 'vue'
// 定义props接收路由传递的参数
const props = defineProps({
  email: String,
  password: String
})

// 初始化表单值
const email = ref(props.email || '')
const password = ref(props.password || '')

// 登录请求处理
const handleLogin = async () => {
  // 登录逻辑
}
</script>

你之前用props出现编译问题，大概率是没在路由中配置props转换函数，或者defineProps的写法不符合Vue3规范，按上面的配置即可解决。

方案二：SessionStorage临时存储（更安全） #

如果不想让密码暴露在URL中，可使用sessionStorage临时存储数据，跳转后读取并清除：

1. 注册页修改跳转逻辑 #

const jumpToLogin = () => {
  // 将数据存入sessionStorage
  sessionStorage.setItem('tempLoginData', JSON.stringify({
    email: email.value,
    password: password.value
  }))
  router.push({ name: 'Login' })
  showExistModal.value = false
}

2. 登录页读取并清理数据 #

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

const email = ref('')
const password = ref('')

onMounted(() => {
  // 读取sessionStorage中的临时数据
  const tempData = sessionStorage.getItem('tempLoginData')
  if (tempData) {
    const { email: tempEmail, password: tempPassword } = JSON.parse(tempData)
    email.value = tempEmail
    password.value = tempPassword
    // 读取后立即删除，避免残留
    sessionStorage.removeItem('tempLoginData')
  }
})

// 登录逻辑省略
</script>

方案对比 #

• Query参数+props：实现简单，无需额外存储，但密码会暴露在URL中，适合非敏感场景；
• SessionStorage：数据不会出现在URL，安全性更高，实现也不复杂，推荐使用。

内容的提问来源于stack exchange，提问作者Arut Anastasian