PrimeVue模板中不导入组件实现Vue文件间用户数据传递

你的问题核心是路由跳转的页面间无法通过emit传递数据——emit仅适用于父子组件的直接通信，而登录页和个人资料页是独立的路由组件，跳转后原组件已销毁，自然接收不到事件。下面提供两种无需导入组件的实现方式：

方案一：使用Pinia全局状态管理（推荐） #

Pinia是Vue官方推荐的状态管理工具，适合在整个应用中共享响应式数据，无需手动导入组件即可访问。

步骤1：创建用户状态Store #

在项目中新建stores/userStore.js：

import { defineStore } from 'pinia';

export const useUserStore = defineStore('user', {
  state: () => ({
    currentUser: {}
  }),
  actions: {
    setUser(userData) {
      this.currentUser = userData;
    },
    clearUser() {
      this.currentUser = {};
    }
  }
});

步骤2：登录页更新Store #

修改登录页的navigateToDashboard方法，登录成功后将数据存入Store：

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { useLayout } from '@/layout/composables/layout';
import AppConfig from '@/layout/AppConfig.vue';
import axios from 'axios';
import { useUserStore } from '@/stores/userStore';

const router = useRouter();
const rememberMe = ref(false);
const { layoutConfig } = useLayout();
const e_mail = ref("");
const pass = ref("");
const userStore = useUserStore();

const navigateToDashboard = async () => {
  axios.post("http://localhost:3000/api/user/login", {email: e_mail.value, password: pass.value})
  .then(response =>  {
    userStore.setUser(response.data.user);
    console.log(userStore.currentUser);
    router.push({ name: 'e-commerce' });
  });
};
</script>

步骤3：个人资料页读取Store数据 #

修改个人资料页，直接从Store获取用户数据：

<script setup>
import { computed } from 'vue';
import { useRouter } from 'vue-router';
import { useLayout } from '@/layout/composables/layout';
import { useUserStore } from '@/stores/userStore';

const router = useRouter();
const { layoutConfig } = useLayout();
const userStore = useUserStore();

const userData = computed(() => userStore.currentUser);
</script>

<template>
  <div class="px-5 min-h-screen flex justify-content-center align-items-center">
    <div class="border-1 surface-border surface-card border-round py-7 px-4 md:px-7 z-1">
      <label>Username</label>
      <span>{{ userData.username }}</span>
      <label>E-Mail</label>
      <span>{{ userData.email }}</span>
      <label>Phone</label>
      <span>{{ userData.phone }}</span>
    </div>
  </div>
</template>

方案二：使用LocalStorage/SessionStorage（轻量方案） #

如果项目不需要复杂的状态管理，用浏览器本地存储是最简单的方式，数据会持久化（SessionStorage在页面关闭后清空，LocalStorage长期保存）。

步骤1：登录页存储数据 #

修改登录页的请求回调：

const navigateToDashboard = async () => {
  axios.post("http://localhost:3000/api/user/login", {email: e_mail.value, password: pass.value})
  .then(response =>  {
    const user = response.data.user;
    localStorage.setItem('currentUser', JSON.stringify(user));
    router.push({ name: 'e-commerce' });
  });
};

步骤2：个人资料页读取数据 #

修改个人资料页的脚本和模板：

<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { useLayout } from '@/layout/composables/layout';

const router = useRouter();
const { layoutConfig } = useLayout();
const userData = ref({});

onMounted(() => {
  const savedUser = localStorage.getItem('currentUser');
  if (savedUser) {
    userData.value = JSON.parse(savedUser);
  }
});
</script>

<template>
  <div class="px-5 min-h-screen flex justify-content-center align-items-center">
    <div class="border-1 surface-border surface-card border-round py-7 px-4 md:px-7 z-1">
      <label>Username</label>
      <span>{{ userData.username }}</span>
      <label>E-Mail</label>
      <span>{{ userData.email }}</span>
      <label>Phone</label>
      <span>{{ userData.phone }}</span>
    </div>
  </div>
</template>

原代码的两个关键问题 #

1. 响应式失效：原登录页中user = response.data.user直接覆盖了ref对象，应该改为user.value = response.data.user才能保持响应式。
2. emit无效：跨路由页面跳转时，原组件已被销毁，emit事件无法被新页面接收，所以这种场景下不能用emit。

内容的提问来源于stack exchange，提问作者Utku ARSLAN