如何在vue3+ts项目中使用query和params传参

在Vue3 + TypeScript项目中，我们可以通过组合使用 params 和 query 来实现路由传参。下面是具体的步骤：

1. 安装路由

首先，我们需要通过 npm 或者 yarn 来安装 vue-router 路由插件。可以使用以下命令进行安装：

npm install vue-router

yarn add vue-router

2. 创建路由

安装 vue-router 后，我们需要在 src/router/index.ts 中创建路由并配置相应路由规则。下面是示例代码：

// src/router/index.ts

import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
import Home from "@/views/Home.vue";
import About from "@/views/About.vue";
import Article from "@/views/Article.vue";

const routes: Array<RouteRecordRaw> = [
  { path: "/", name: "Home", component: Home },
  { path: "/about", name: "About", component: About },
  // Article 路由规则中包含了动态路由参数 ":id"
  { path: "/article/:id", name: "Article", component: Article }
];

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

export default router;

上面的路由规则在 routes 数组中进行配置，其中包含了三个路由规则：

• / 路由指向 Home.vue 组件
• /about 路由指向 About.vue 组件
• /article/:id 路由指向 Article.vue 组件，其中 :id 是动态路由参数

3. 在组件中使用路由传参

有两种方式可以在组件中使用路由传参，分别是 params 和 query。

3.1 使用 params 传参

params 是一种将参数存储在路由路径中的方式，它以冒号（:）开头，可以在组件的 props 中通过 route 对象来获取参数。下面是示例代码：

// src/views/Article.vue

<template>
  <div>
    <h1>文章标题：{{ title }}</h1>
    <p>文章内容：{{ content }}</p>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  props: ["route"],
  computed: {
    // 从 route.params 中获取 id 参数
    id(): string {
      return this.route.params.id;
    },
    title(): string {
      // 根据 id 查询文章标题
      // 此处省略具体代码
      return "文章" + this.id + "的标题";
    },
    content(): string {
      // 根据 id 查询文章内容
      // 此处省略具体代码
      return "文章" + this.id + "的内容";
    },
  },
});
</script>

上面的代码中，通过在路由规则中定义 :id 参数，将 id 传递给了 Article.vue 组件。组件中使用 props 接收 route 对象，并从中获取 id 参数来查询文章标题和内容。

3.2 使用 query 传参

与 params 不同，query 参数是一种存储在路由查询字符串中的方式，比如在 URL 中添加 ?id=1。在组件中，可以通过 $route.query 或者 router.history.current.query 来获取 query 参数。下面是示例代码：

// src/views/Article.vue

<template>
  <div>
    <h1>文章标题：{{ title }}</h1>
    <p>文章内容：{{ content }}</p>
  </div>
</template>

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

export default defineComponent({
  data() {
    return {
      id: "",
    };
  },
  computed: {
    title(): string {
      // 根据 id 查询文章标题
      // 此处省略具体代码
      return "文章" + this.id + "的标题";
    },
    content(): string {
      // 根据 id 查询文章内容
      // 此处省略具体代码
      return "文章" + this.id + "的内容";
    },
  },
  created() {
    // 使用 useRouter 获取当前路由的 query 参数
    const router = useRouter();
    // 从 query 中获取 id 参数
    this.id = router.history.current.query.id;
  },
});
</script>

上面的代码中，使用 useRouter 获取当前路由的 query 参数，并将其中的 id 参数存储在组件的 data 中供后续使用。

4. 示例说明

我们假设现在有一个文章列表页面，点击文章标题可以跳转到对应文章的详情页面。我们可以通过如下方式来实现：

<!-- src/views/Home.vue -->

<template>
  <div>
    <h1>文章列表</h1>
    <ul>
      <li v-for="(article, index) in articles" :key="index">
        <router-link :to="{ name: 'Article', params: { id: article.id } }">{{ article.title }}</router-link>
      </li>
    </ul>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  data() {
    return {
      articles: [
        { id: "1", title: "文章1" },
        { id: "2", title: "文章2" },
        { id: "3", title: "文章3" },
      ],
    };
  },
});
</script>

上面的代码中，在文章标题上使用 router-link 组件将路由指向 Article.vue 组件，并通过 params 传递了 id 参数。在 Article.vue 中，可以通过 $route.params.id 获取到 id 参数。

另外，我们也可以通过查询字符串来实现文章详情页的跳转：

<!-- src/views/Home.vue -->

<template>
  <div>
    <h1>文章列表</h1>
    <ul>
      <li v-for="(article, index) in articles" :key="index">
        <router-link :to="{ name: 'Article', query: { id: article.id } }">{{ article.title }}</router-link>
      </li>
    </ul>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  data() {
    return {
      articles: [
        { id: "1", title: "文章1" },
        { id: "2", title: "文章2" },
        { id: "3", title: "文章3" },
      ],
    };
  },
});
</script>

上面的代码中，在查询字符串中传递了 id 参数，可以通过 $route.query.id 获取到参数值。在 Article.vue 组件中，使用 useRouter 来获取 query 参数。