一文搞懂 Vue 中路由传参的多种方式与应用场景

原创已于 2025-02-13 09:06:18 修改 · 1.1k 阅读

28 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #VueRouter #Vue路由传参 #javascript #前端框架 #前端

于 2025-02-12 17:05:48 首次发布

前言：家人们，大家好！今天分享一篇文章给大家！要是文章对你有帮助，激发了你的灵感，

求个收藏 + 关注啦～后续还有超多惊喜，别错过！

一、引言

在 Vue 3 开发单页面应用（SPA）时，路由是不可或缺的一部分。而在不同路由页面之间传递参数是一个常见需求，比如从列表页传递商品 ID 到详情页以展示具体商品信息。Vue Router 4（Vue 3 配套的路由管理器）提供了多种传参方式，下面我们就来详细了解这些方式及其使用场景。

二、前置准备

在开始介绍路由传参之前，需要确保已经创建了一个 Vue 3 项目并安装了 Vue Router 4。可以使用以下命令进行安装：

npm install vue-router@4

接着在项目中进行路由的基本配置，以下是一个简单示例：

// router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import Detail from '../views/Detail.vue';

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/detail',
    name: 'Detail',
    component: Detail
  }
];

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

export default router;

然后在 main.js 中引入并使用路由：

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

const app = createApp(App);
app.use(router);
app.mount('#app');

三、路由传参方式

3.1 通过 `params` 传参

配置路由：在路由配置中使用动态路由参数，即在路径中使用冒号 : 来标记参数。

const routes = [
  {
    path: '/detail/:id',
    name: 'Detail',
    component: Detail
  }
];

传递参数：在跳转路由时，通过路由名称和 params 对象传递参数。

<template>
  <router-link :to="{ name: 'Detail', params: { id: 123 } }">跳转到详情页</router-link>
</template>

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

const router = useRouter();
const goToDetail = () => {
  router.push({ name: 'Detail', params: { id: 123 } });
};
</script>

接收参数：在目标组件中使用 useRoute 来获取传递的参数。

<template>
  <div>
    <p>商品 ID: {{ route.params.id }}</p>
  </div>
</template>

<script setup>
import { useRoute } from 'vue-router';

const route = useRoute();
</script>

注意事项：使用 params 传参时，如果使用路径跳转（如 path: '/detail/123'），则需要在路径中明确指定参数值；并且当使用命名路由跳转时，params 参数不会在 URL 中显示（但会在路由记录中存在），如果刷新页面，依赖 params 传递的参数可能会丢失（除非使用 HTML5 History 模式）。
传递参数：在跳转路由时，通过 query 对象传递参数，这种方式可以使用路径跳转或命名路由跳转。
3.2 通过 query 传参

传递参数：在跳转路由时，通过 query 对象传递参数，这种方式可以使用路径跳转或命名路由跳转。

<template>
  <router-link :to="{ name: 'Detail', query: { id: 123, name: '商品名称' } }">跳转到详情页</router-link>
</template>

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

const router = useRouter();
const goToDetail = () => {
  router.push({ name: 'Detail', query: { id: 123, name: '商品名称' } });
};
</script>

接收参数：同样在目标组件中使用 useRoute 来获取 query 参数。

<template>
  <div>
    <p>商品 ID: {{ route.query.id }}</p>
    <p>商品名称: {{ route.query.name }}</p>
  </div>
</template>

<script setup>
import { useRoute } from 'vue-router';

const route = useRoute();
</script>

注意事项：query 参数会显示在 URL 中，格式为 ?key1=value1&key2=value2，刷新页面时参数不会丢失，因为参数是包含在 URL 中的。
安装并配置 Pinia：首先安装 Pinia，然后在项目中进行配置。
3.3 通过状态管理库传参（以 Pinia 为例）
安装并配置 Pinia：首先安装 Pinia，然后在项目中进行配置。

npm install pinia

// stores/index.js
import { createPinia } from 'pinia';

const pinia = createPinia();

export default pinia;

创建 Store：创建一个用于存储参数的 Store。

// stores/paramStore.js
import { defineStore } from 'pinia';

export const useParamStore = defineStore('param', {
  state: () => ({
    paramData: null
  }),
  actions: {
    setParamData(data) {
      this.paramData = data;
    }
  }
});

传递参数：在跳转前设置 Store 中的数据。

<template>
  <button @click="goToDetail">跳转到详情页</button>
</template>

<script setup>
import { useRouter } from 'vue-router';
import { useParamStore } from '../stores/paramStore';

const router = useRouter();
const paramStore = useParamStore();

const goToDetail = () => {
  const data = { id: 123, name: '商品名称' };
  paramStore.setParamData(data);
  router.push({ name: 'Detail' });
};
</script>

接收参数：在目标组件中获取 Store 中的数据。

<template>
  <div>
    <p>商品 ID: {{ paramStore.paramData.id }}</p>
    <p>商品名称: {{ paramStore.paramData.name }}</p>
  </div>
</template>

<script setup>
import { useParamStore } from '../stores/paramStore';

const paramStore = useParamStore();
</script>

结语

Vue 3 中的路由传参方式各有特点和适用场景。params 传参适合传递需要在路由路径中体现的参数，但刷新页面可能丢失数据；query 传参方便且刷新页面数据不会丢失，适合传递一些简单的参数；而状态管理库传参则适合传递复杂的数据结构和在多个组件间共享数据。开发者可以根据具体需求选择合适的传参方式。

如果你在 Vue 3 路由传参过程中遇到任何问题或者有不同的见解，欢迎在评论区留言交流。希望这篇文章能帮助你更好地掌握 Vue 3 路由传参的相关知识。别忘了点赞和关注，获取更多 Vue 开发的实用技巧！