【前端】Vue Router路由传参的两种方式详解：params与query的使用技巧！

💥 欢迎来到我的博客！很高兴能在这里与您相遇！

首页：GPT-千鑫 – 热爱AI、热爱Python的天选打工人，活到老学到老！！！
导航
- 人工智能系列：包含 OpenAI API Key教程, 50个Prompt指令, Midjourney生成攻略等更多教程…
- 常用开发工具：包含 AI代码补全工具, Vscode-AI工具, IDER or Pycharm-AI工具, 如何使用Cursor等更多教程…
- VScode-AI插件：集成13种AI大模型（GPT4、o1等）、支持Open API调用、自定义助手、文件上传等 >>> - CodeMoss & ChatGPT-AI中文版

💥 期待与您一起探索AI、共同成长。✨ 立即订阅本专栏，加入我们的旅程，共同发现更多精彩！🌟

请添加图片描述
你是否对params和query这两者的区别，和使用场景感到困惑呢？别担心，接下来我将为你详细解析这两种传参方式的使用技巧！🚀

一、Vue Router基础知识

在深入params和query之前，我们先来简单了解一下Vue Router的基本概念。Vue Router是Vue.js的官方路由管理器，它允许我们在单页应用中实现不同的视图切换。通过路由，我们可以将不同的URL映射到不同的组件，从而实现动态页面的效果。

在这里插入图片描述

1.1 路由的基本配置

在使用Vue Router之前，我们需要先进行基本的配置。以下是一个简单的路由配置示例：

import Vue from 'vue';
import Router from 'vue-router';
import Home from './components/Home.vue';
import User from './components/User.vue';Vue.use(Router);const router = new Router({routes: [{ path: '/', component: Home },{ path: '/user/:id', component: User }]
});export default router;

在这个配置中，我们定义了两个路由：一个是首页（/），另一个是用户页面（/user/:id），其中:id是一个动态参数。

二、params与query的区别

在Vue Router中，params和query都是用于传递参数的方式，但它们的使用场景和特点却有所不同。

2.1 params

params是通过路由路径传递的参数，通常用于需要在URL中明确表示的动态数据。params的特点包括：

路径参数：params是URL的一部分，通常以:开头，例如/user/:id。
强类型：params的值在路由匹配时就被解析，适合用于需要强类型的场景。
不支持重复参数：同一路由中，params不能重复。

使用示例

假设我们有一个用户详情页面，我们可以通过params传递用户ID：

// 路由配置
{ path: '/user/:id', component: User }// 跳转到用户页面
this.$router.push({ path: `/user/${userId}` });

在用户组件中，我们可以通过this.$route.params获取到传递的参数：

export default {mounted() {const userId = this.$route.params.id;console.log(`用户ID: ${userId}`);}
}

2.2 query

query是通过URL的查询字符串传递的参数，通常用于可选参数或多个参数的场景。query的特点包括：

查询字符串：query是URL的一部分，格式为?key=value，可以包含多个参数，例如/user?id=1&name=John。
灵活性：query参数可以是可选的，适合用于过滤、排序等场景。
支持重复参数：同一路由中，query可以重复。

使用示例

如果我们想要传递多个参数，例如用户ID和用户名称，可以使用query：

// 路由配置
{ path: '/user', component: User }// 跳转到用户页面
this.$router.push({ path: '/user', query: { id: userId, name: userName } });

在用户组件中，我们可以通过this.$route.query获取到传递的参数：

export default {mounted() {const userId = this.$route.query.id;const userName = this.$route.query.name;console.log(`用户ID: ${userId}, 用户名: ${userName}`);}
}

三、params与query的使用场景

了解了params和query的基本概念和使用方法后，我们再来看看它们各自适合的使用场景。

3.1 使用params的场景

资源标识：当你需要通过URL明确标识某个资源时，例如用户ID、文章ID等，params是一个不错的选择。
数据优势：由于params是URL的一部分，搜索引擎更容易抓取这些信息

3.2 使用query的场景

可选参数：当你需要传递一些可选参数时，例如过滤条件、排序方式等，query更为灵活。
多个参数：如果需要传递多个参数，query可以更方便地实现。

四、params与query的优缺点比较

特性	params	query
位置	URL路径的一部分	URL查询字符串
类型	强类型	弱类型
重复参数	不支持	支持
SEO友好	更友好	较弱
使用场景	资源标识	可选参数、多个参数