vue router 如何使用params和query传参，以及有什么区别？

前言

传参是前端经常需要用的一个操作，很多场景都会需要用到上个页面的参数，比如在电商网站上，需要将商品的 id 传递到商品详情页。

vue-router 是一个流行的 vue 路由库，它提供了多种传参方式，包括 params 和 query。

本文将详细介绍 vue-router 如何使用 params 和 query 传参，以及它们之间的区别。

params 和 query 的区别

params 和 query 都是 vue-router 提供的传参方式，但它们之间存在一些区别。

• params 是动态路由的一部分，而 query 是查询字符串的一部分。
• params 可以通过 $route.params 访问，而 query 可以通过 $route.query 访问。
• params 是必须的，而 query 是可选的。

如何在 vue-router 中使用 params 和 query

params

要在 vue-router 中使用 params，需要在路由定义中使用 :paramName 语法。例如：

const routes = [
  {
    path: '/user/:id',
    component: User,
  },
];

在这个例子中，:id 就是一个 param，它可以动态地匹配路由 URL 中的 id 部分。

在组件中，可以使用 $route.params 访问 params。例如：

export default {
  data() {
    return {
      id: this.$route.params.id,
    };
  },
  template: `<div>{{ id }}</div>`,
};

query

要在 vue-router 中使用 query，需要在路由 URL 中使用 ?queryName=queryValue 语法。例如：

/user?id=123

在这个例子中，id 就是一个 query，它的值为 123。

在组件中，可以使用 $route.query 访问 query。例如：

export default {
  data() {
    return {
      id: this.$route.query.id,
    };
  },
  template: `<div>{{ id }}</div>`,
};

总结

vue-router 提供了多种传参方式，包括 params 和 query。params 是动态路由的一部分，而 query 是查询字符串的一部分。params 是必须的，而 query 是可选的。

在组件中，可以使用 $route.params 和 $route.query 访问 params 和 query。