在vue3+ts项目里使用query和params传参

在Vue 3 + TypeScript项目中，您可以使用query和params来传递参数。以下是如何在Vue 3 + TypeScript中使用这两种方式进行参数传递的示例：

// 路由配置
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';

const routes: Array<RouteRecordRaw> = [
  {
    path: '/example',
    name: 'Example',
    component: ExampleComponent,
    props: (route) => ({
      queryParam: route.query.queryParam, // 使用query传递参数
      routeParam: route.params.routeParam // 使用params传递参数
    })
  }
];

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

export default router;

<!-- ExampleComponent.vue -->
<template>
  <div>
    <h1>Example Component</h1>
    <p>Query Parameter: {{ queryParam }}</p>
    <p>Route Parameter: {{ routeParam }}</p>
  </div>
</template>

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

export default defineComponent({
  props: {
    queryParam: {
      type: String,
      required: true
    },
    routeParam: {
      type: String,
      required: true
    }
  }
});
</script>

在上面的示例中，我们定义了一个名为Example的路由，它对应的组件是ExampleComponent。在路由配置中，我们使用props字段来传递参数。

对于query参数，我们可以使用route.query.queryParam来获取传递的参数。在组件中，我们使用props选项来定义queryParam属性，并指定它的类型为String，并将其设置为必需的。

对于params参数，我们可以使用route.params.routeParam来获取传递的参数。在组件中，我们使用props选项来定义routeParam属性，并指定它的类型为String，并将其设置为必需的。

这样，您就可以在Vue 3 + TypeScript项目中使用query和params来传递参数了。

两者对比

在Vue Router中，query和params是两种不同的方式来传递参数。它们有以下区别和对比：

1. URL中的位置：query参数出现在URL的查询字符串中，以?开头，后面是key=value对的形式，多个参数之间使用&分隔。例如：/example?param1=value1&param2=value2。而params参数出现在URL的路径中，以/分隔，例如：/example/param1/param2。

2. 传递方式：query参数是通过URL进行传递的，可以直接在URL中进行编辑和查看。而params参数是通过路由配置中的path字段进行定义和匹配的。

3. 用途：query参数通常用于传递可选参数，例如搜索关键字、分页信息等。它们对于URL的解析和构造非常方便，也可以直接在浏览器地址栏中进行编辑。而params参数通常用于传递必需的参数，例如资源的ID或者唯一标识符等。

4. 传递方式：query参数可以通过$route.query来获取，也可以在路由链接中使用to.query来传递。而params参数可以通过$route.params来获取，也可以在路由链接中使用to.params来传递。

5. 类型检查：在Vue 3中，您可以使用TypeScript来对query和params进行类型检查。对于query参数，您可以使用route.query来获取参数，并将其类型定义为Record<string, string>。对于params参数，您可以使用route.params来获取参数，并将其类型定义为具体的参数类型。

总的来说，query和params是两种不同的参数传递方式，适用于不同的场景和需求。您可以根据具体的需求选择使用哪种方式来传递参数。

场景

query和params在Vue Router中都有各自的使用场景和优缺点。下面是它们的详细说明：

query的使用场景和优缺点：

• 使用场景：

  • 传递可选参数：query参数通常用于传递可选参数，例如搜索关键字、分页信息等。它们可以在URL中直接编辑和查看，非常方便。
  • 多个参数传递：query参数可以同时传递多个参数，通过key=value对的形式，多个参数之间使用&分隔。

• 优点：

  • 方便解析和构造URL：query参数对于URL的解析和构造非常方便，可以直接在浏览器地址栏中进行编辑。
  • 可选参数传递：query参数可以传递可选参数，不会影响路由的匹配和导航。

• 缺点：

  • 不适合传递必需参数：query参数不适合传递必需的参数，因为它们可以被用户直接编辑和删除，可能导致参数丢失或错误。

params的使用场景和优缺点：

• 使用场景：

  • 传递必需参数：params参数通常用于传递必需的参数，例如资源的ID或者唯一标识符等。
  • 简洁的URL路径：params参数出现在URL的路径中，可以使URL路径更加简洁和有意义。

• 优点：

  • 参数类型检查：在Vue 3中，您可以使用TypeScript来对params进行类型检查，确保传递的参数类型正确。
  • 简洁的URL路径：params参数出现在URL的路径中，可以使URL路径更加简洁和有意义。

• 缺点：

  • 不适合传递多个参数：params参数通常用于传递单个参数，不适合同时传递多个参数。
  • 不方便解析和构造URL：相比于query参数，params参数对于URL的解析和构造相对麻烦，需要在路由配置中进行定义和匹配。

综上所述，query和params在不同的场景和需求下有各自的优缺点。您可以根据具体的需求选择使用哪种方式来传递参数

封装

在Vue Router中，您可以通过自定义函数或者插件来封装query和params的传值方式，以便于在应用中更方便地使用。

以下是两种封装方式的示例：

1. 自定义函数封装：

您可以创建一个自定义的函数，用于处理query和params的传值方式。例如，您可以创建一个名为setRouteQuery的函数，用于设置query参数：

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

const setRouteQuery = (key, value) => {
  const query = { ...router.currentRoute.value.query }
  query[key] = value
  router.push({ query })
}

const app = createApp(App)
app.config.globalProperties.$setRouteQuery = setRouteQuery
app.use(router)
app.mount('#app')

然后，在您的组件中就可以直接使用$setRouteQuery函数来设置query参数：

<template>
  <button @click="setSearch('keyword')">Search</button>
</template>

<script>
export default {
  methods: {
    setSearch(keyword) {
      this.$setRouteQuery('search', keyword)
    }
  }
}
</script>

2. 插件封装：

您也可以创建一个插件，以便在整个应用中使用query和params的传值方式。例如，您可以创建一个名为routeParams的插件：

// routeParams.js
export default {
  install(app) {
    app.config.globalProperties.$setRouteQuery = (key, value) => {
      const query = { ...app.config.globalProperties.$route.query }
      query[key] = value
      app.config.globalProperties.$router.push({ query })
    }

    app.config.globalProperties.$setRouteParams = (key, value) => {
      const params = { ...app.config.globalProperties.$route.params }
      params[key] = value
      app.config.globalProperties.$router.push({ params })
    }
  }
}

然后，在main.js中使用插件：

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

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

现在，您就可以在整个应用中使用$setRouteQuery和$setRouteParams来设置query和params参数了：

<template>
  <button @click="setSearch('keyword')">Search</button>
  <button @click="setProduct(123)">View Product</button>
</template>

<script>
export default {
  methods: {
    setSearch(keyword) {
      this.$setRouteQuery('search', keyword)
    },
    setProduct(id) {
      this.$setRouteParams('id', id)
    }
  }
}
</script>

通过自定义函数或者插件的封装，您可以更方便地使用query和params的传值方式，并在整个应用中复用这些封装的函数。