Vue3中如何在两个.vue视图文件间传递数据？

问题概述 #

在Vue3的两个视图文件（view05.vue和view06.vue）间通过Vue Router传递数据时，控制台无报错，但view06无法显示传递的数据。

问题根源分析 #

1. 路由配置无效：在view05.vue组件内定义routes数组是错误的，Vue Router的路由配置必须放在全局路由文件（如router/index.ts）中，组件内的路由定义不会被生效。
2. 参数传递方式错误：跳转时使用state字段传递数据，state是浏览器History API的状态属性，不属于路由params范畴，无法通过route.params获取。
3. 变量不同步：输入框绑定的是state.enteredValue，但判断逻辑中使用独立的enteredValue ref，两者值不统一，导致判断和传递的数据不一致。
4. 参数接收逻辑错误：view06中用toRefs处理computed返回的路由参数，routeParams是computed对象，toRefs无法正确解构其属性，且跳转时未传递有效params，自然获取不到值。

修复方案 #

1. 全局路由配置（router/index.ts） #

确保路由配置在全局文件中，定义带参数的路由规则：

import { createRouter, createWebHistory } from 'vue-router'
import view05 from '../views/view05.vue'
import view06 from '../views/view06.vue'

const routes = [
  {
    path: '/view05',
    name: 'view05',
    component: view05
  },
  {
    path: '/view06/:enteredValue', // 定义参数占位符
    name: 'view06',
    component: view06,
    props: true // 开启props传递参数，实现组件与路由解耦
  }
]

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes
})

export default router

2. 修改view05.vue的跳转逻辑 #

移除组件内无效的routes数组，统一使用state.enteredValue，并通过params传递参数：

<script setup lang="ts">
import { reactive } from "vue";
import { useRouter } from 'vue-router';

const router = useRouter();

const state = reactive({
  enteredValue: 'test'
})

function checkIfNumbers() {
    if (/\d/.test(state.enteredValue)) {
        alert('enteredValue contains numbers!');
    } else {
        // 通过params传递参数，匹配路由配置中的:enteredValue
        router.push({ name: 'view06', params: { enteredValue: state.enteredValue } });
    }
}
</script>

<template>
    <main>
       <div section = "section01">
            <div class = "formulaire">
                <h1>Please Enter Your Login</h1>
                <form @submit.prevent="checkIfNumbers">
                    <label for="enteredValue">Enter your value:</label>
                    <br>
                    <input type="text" id="enteredValue" v-model="state.enteredValue" />
                    <br>
                    <br>
                    <button type="submit">Check if Numbers</button>
                </form>
            </div>
       </div>
    </main>
</template>

3. 修改view06.vue的参数接收方式 #

推荐两种接收方式，按需选择：

方式一：通过useRoute直接获取params

<script setup lang="ts">
import { useRoute } from 'vue-router';

const route = useRoute();
// TypeScript需添加类型断言，确保类型安全
const enteredValue = route.params.enteredValue as string;
</script>

<template>
    <main>
        <div section = "section01">
            <div class = "description">
                Controller de la view 06: Aucun
                <br>
                la valeur recue est: {{ enteredValue }}
            </div>
        </div>
    </main>
</template>

方式二：通过props接收（推荐，解耦路由依赖）

由于路由配置中开启了props: true，可直接声明props接收参数：

<script setup lang="ts">
// 声明props，TypeScript自动推导类型
defineProps<{
  enteredValue: string
}>();
</script>

<template>
    <main>
        <div section = "section01">
            <div class = "description">
                Controller de la view 06: Aucun
                <br>
                la valeur recue est: {{ enteredValue }}
            </div>
        </div>
    </main>
</template>

额外说明 #

• 若参数无需在URL中显示，可改用query传递：跳转时用query: { enteredValue: state.enteredValue }，接收时用route.query.enteredValue，路由配置无需定义占位符。
• state字段仅用于浏览器历史状态存储，刷新页面后数据会丢失，不适合常规页面间传参场景。

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