Vue Router 中的路由参数（Route Params）和查询参数（Query Params）有什么区别？如何获取和使用它们？ - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位靓仔靓女们，早上好/下午好/晚上好！我是你们的老朋友，今天咱们来聊聊Vue Router里经常让人傻傻分不清楚的两位兄弟：路由参数（Route Params）和查询参数（Query Params）。这两个家伙虽然都是用来传递信息的，但用法和场景却大相径庭。今天，咱们就好好扒一扒他们的底裤，看看他们到底有啥不同，怎么用，以及在实际开发中应该怎么选择。

开场白：为什么要有参数？

想象一下，你正在浏览一个电商网站。当你点击一个商品时，网站如何知道你要看的是哪个商品呢？总不能每个商品都做一个单独的页面吧？那样维护起来简直要人命！这就是参数的用武之地。参数就像是URL上的标签，告诉服务器或前端应用我们需要什么特定的资源或执行什么特定的操作。

第一回合：路由参数（Route Params）

路由参数，顾名思义，是路由路径的一部分。它们通常用来标识资源的唯一ID或者类型。举个例子：

/users/:id

在这个路由中，:id就是一个路由参数。它告诉我们，这个路由是用来展示用户信息的，而id就是用户的唯一标识。

如何定义路由参数？

在Vue Router中，你可以像这样定义带路由参数的路由：

const routes = [
  {
    path: '/users/:id',
    component: UserDetail
  },
  {
    path: '/products/:category/:productId',
    component: ProductDetail
  }
]

注意，路由参数以冒号:开头。你可以定义多个路由参数，它们会按照定义的顺序依次匹配URL中的片段。

如何获取路由参数？

在你的组件中，你可以通过this.$route.params来获取路由参数。

<template>
  <div>
    <h1>User Detail</h1>
    <p>User ID: {{ userId }}</p>
  </div>
</template>

<script>
export default {
  computed: {
    userId() {
      return this.$route.params.id;
    }
  }
}
</script>

在这个例子中，我们通过计算属性userId来获取路由参数id的值。

路由参数的特点：

URL结构化： 路由参数是URL路径的一部分，使URL更具结构化和语义化。
必须存在： 如果你的路由定义了路由参数，那么在访问该路由时，必须提供对应的参数值。否则，路由可能无法匹配到正确的组件。
唯一标识： 路由参数通常用于标识资源的唯一ID或类型。
SEO友好： 由于路由参数是URL的一部分，搜索引擎更容易理解页面的内容，对SEO更有利。

例子：电商网站的商品详情页

假设你的电商网站有一个商品详情页，URL如下：

/products/electronics/12345

在这个URL中，electronics是商品类别，12345是商品ID。你可以这样定义路由：

const routes = [
  {
    path: '/products/:category/:productId',
    component: ProductDetail
  }
]

然后在ProductDetail组件中，你可以这样获取参数：

<template>
  <div>
    <h1>Product Detail</h1>
    <p>Category: {{ category }}</p>
    <p>Product ID: {{ productId }}</p>
  </div>
</template>

<script>
export default {
  computed: {
    category() {
      return this.$route.params.category;
    },
    productId() {
      return this.$route.params.productId;
    }
  }
}
</script>

第二回合：查询参数（Query Params）

查询参数是URL中?后面的部分。它们通常用来传递非必须的参数，例如搜索关键词、分页信息、排序方式等等。举个例子：

/users?page=2&sort=name

在这个URL中，page=2和sort=name就是查询参数。

如何添加查询参数？

你可以在Vue Router中使用router-link组件或router.push()方法来添加查询参数。

使用router-link：

<router-link :to="{ path: '/users', query: { page: 2, sort: 'name' } }">
  Go to Users Page (Page 2, Sorted by Name)
</router-link>

使用router.push()：

this.$router.push({
  path: '/users',
  query: {
    page: 2,
    sort: 'name'
  }
})

如何获取查询参数？

在你的组件中，你可以通过this.$route.query来获取查询参数。

<template>
  <div>
    <h1>Users Page</h1>
    <p>Page: {{ page }}</p>
    <p>Sort: {{ sort }}</p>
  </div>
</template>

<script>
export default {
  computed: {
    page() {
      return this.$route.query.page;
    },
    sort() {
      return this.$route.query.sort;
    }
  }
}
</script>

查询参数的特点：

可选性： 查询参数是可选的，即使URL中没有查询参数，路由仍然可以匹配到正确的组件。
非结构化： 查询参数是键值对的形式，它们不影响URL的结构。
过滤和排序： 查询参数通常用于过滤和排序数据。
状态保持： 查询参数可以用来在不同页面之间传递状态信息。

例子：搜索结果页

假设你的网站有一个搜索功能，用户可以输入关键词进行搜索。搜索结果页的URL可能如下：

/search?keyword=vue&category=framework

在这个URL中，keyword是搜索关键词，category是商品类别。你可以这样使用查询参数：

<template>
  <div>
    <h1>Search Results</h1>
    <p>Keyword: {{ keyword }}</p>
    <p>Category: {{ category }}</p>
  </div>
</template>

<script>
export default {
  computed: {
    keyword() {
      return this.$route.query.keyword;
    },
    category() {
      return this.$route.query.category;
    }
  }
}
</script>

第三回合：路由参数 vs 查询参数：终极PK

现在，让我们来总结一下路由参数和查询参数的区别：

特性	路由参数 (Route Params)	查询参数 (Query Params)
位置	URL路径的一部分	URL中`?`后面的部分
必需性	必须存在 (如果路由定义了)	可选的
结构化	URL结构化	非结构化
主要用途	标识资源，唯一ID，类型	过滤，排序，状态保持
SEO	友好	影响较小
例子	`/users/:id`, `/products/:category/:productId`	`/users?page=2&sort=name`, `/search?keyword=vue`
获取方式	`this.$route.params`	`this.$route.query`

什么时候用路由参数？什么时候用查询参数？

如果你需要标识一个特定的资源，并且这个ID是必须的，那么使用路由参数。 比如，用户详情页、商品详情页等等。
如果你需要传递一些可选的过滤条件、排序方式或者其他状态信息，那么使用查询参数。 比如，搜索结果页、分页等等。
如果你的URL需要具有良好的结构和语义化，那么优先考虑路由参数。
如果你的参数可能会有很多，并且不希望影响URL的结构，那么使用查询参数。

实战演练：一个综合的例子

假设你正在开发一个博客系统。

文章详情页： 你应该使用路由参数，例如/posts/:id，其中id是文章的唯一ID。
文章列表页： 你可以使用查询参数来支持分页和排序，例如/posts?page=2&sort=date。
文章搜索页： 你可以使用查询参数来传递搜索关键词，例如/search?keyword=vue。

进阶技巧：

参数校验： 在获取路由参数和查询参数之后，你应该进行参数校验，确保参数的有效性。
类型转换： this.$route.params 和 this.$route.query 返回的对象中的值都是字符串类型。如果需要数值类型，请使用 Number() 进行转换。
默认值： 你可以为查询参数设置默认值，当URL中没有提供该参数时，使用默认值。
编程式导航： 使用router.push()方法可以更灵活地控制路由跳转，包括添加路由参数和查询参数。
query 和 params 同时使用: 可以同时使用, 但是query 不会显示在path 里面.

代码示例：参数校验和类型转换

<template>
  <div>
    <h1>Product Detail</h1>
    <p v-if="isValidId">Product ID: {{ productId }}</p>
    <p v-else>Invalid Product ID</p>
  </div>
</template>

<script>
export default {
  computed: {
    productId() {
      const id = this.$route.params.productId;
      return Number(id); // 类型转换
    },
    isValidId() {
      return !isNaN(this.productId) && this.productId > 0; // 参数校验
    }
  }
}
</script>

代码示例：使用默认值

<template>
  <div>
    <h1>Users Page</h1>
    <p>Page: {{ page }}</p>
  </div>
</template>

<script>
export default {
  computed: {
    page() {
      const page = this.$route.query.page || 1; // 默认值为1
      return Number(page);
    }
  }
}
</script>

总结：

路由参数和查询参数是Vue Router中非常重要的概念。理解它们的区别和用法，可以帮助你更好地组织你的路由结构，传递数据，并构建更灵活和可维护的Vue应用。记住，路由参数用于标识资源，查询参数用于传递可选信息。合理地选择和使用它们，可以让你的代码更优雅，用户体验更流畅。

课后练习：

设计一个博客系统的路由结构，包括文章列表页、文章详情页、分类页和搜索页，并说明每个页面应该使用路由参数还是查询参数。
在一个Vue项目中，使用router-link和router.push()方法添加路由参数和查询参数，并测试它们是否能够正确传递数据。
为查询参数设置默认值，并进行参数校验，确保参数的有效性。

希望今天的讲座对大家有所帮助。如果有什么疑问，欢迎随时提问。咱们下次再见！

发表回复 取消回复

发表回复取消回复