Use query and params to pass parameters in vue3+ts project

In Vue 3 + TypeScript projects, you can use query and params to pass parameters. Here’s an example of how to use both of these for parameter passing in Vue 3 + TypeScript:

//routing configuration
import {<!-- --> createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';

const routes: Array<RouteRecordRaw> = [
  {<!-- -->
    path: '/example',
    name: 'Example',
    component: ExampleComponent,
    props: (route) => ({<!-- -->
      queryParam: route.query.queryParam, // use query to pass parameters
      routeParam: route.params.routeParam // Use params to pass parameters
    })
  }
];

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>

In the above example, we defined a route named Example, and its corresponding component is ExampleComponent. In the routing configuration, we use the props field to pass parameters.

For the query parameter, we can use route.query.queryParam to get the passed parameter. In the component, we use the props option to define the queryParam property, specify its type as String, and set it to required.

For the params parameter, we can use route.params.routeParam to get the passed parameters. In the component, we use the props option to define the routeParam property, specify its type as String, and set it to required.

In this way, you can use query and params to pass parameters in Vue 3 + TypeScript projects.

Comparison of the two

In Vue Router, query and params are two different ways to pass parameters. They have the following differences and contrasts:

  1. Position in URL: The query parameter appears in the query string of the URL, starting with ?, followed by key=value pair format, multiple parameters are separated by & . For example: /example?param1=value1 & amp;param2=value2. The params parameters appear in the URL path, separated by /, for example: /example/param1/param2.

  2. Transmission method: query parameters are passed through the URL and can be edited and viewed directly in the URL. The params parameters are defined and matched through the path field in the routing configuration.

  3. Purpose: The query parameter is usually used to pass optional parameters, such as search keywords, paging information, etc. They are very convenient for URL parsing and construction, and can also be edited directly in the browser address bar. The params parameter is usually used to pass necessary parameters, such as the ID or unique identifier of the resource.

  4. Transmission method: query parameters can be obtained through $route.query, or to.query can be used in routing links. code> to pass. The params parameters can be obtained through $route.params, or they can be passed using to.params in the route link.

  5. Type checking: In Vue 3, you can use TypeScript to type check query and params. For the query parameter, you can use route.query to get the parameter and define its type as Record. For params parameters, you can use route.params to get the parameters and define their type as a specific parameter type.

In general, query and params are two different parameter transfer methods, suitable for different scenarios and requirements. You can choose which method to use to pass parameters based on your specific needs.

Scene

query and params have their own usage scenarios, advantages and disadvantages in Vue Router. Here are their detailed descriptions:

Query usage scenarios and advantages and disadvantages:

  • Usage scenario:

    • Passing optional parameters: The query parameter is usually used to pass optional parameters, such as search keywords, pagination information, etc. They can be edited and viewed directly in the URL, which is very convenient.
    • Passing multiple parameters: The query parameter can pass multiple parameters at the same time, in the form of key=value pairs, and use & amp; separated.

  • Benefits:

    • Convenient for parsing and constructing URLs: query parameters are very convenient for parsing and constructing URLs, and can be edited directly in the browser address bar.
    • Optional parameter passing: The query parameter can pass optional parameters, which will not affect the matching and navigation of routes.

  • Disadvantages:

    • Not suitable for passing required parameters: query parameters are not suitable for passing required parameters, because they can be directly edited and deleted by the user, which may result in missing or wrong parameters.

Usage scenarios and advantages and disadvantages of params:

  • Usage scenario:

    • Pass required parameters: The params parameter is usually used to pass required parameters, such as resource IDs or unique identifiers.
    • Concise URL path: params parameters appear in the URL path, which can make the URL path more concise and meaningful.

  • Benefits:

    • Parameter type checking: In Vue 3, you can use TypeScript to perform type checking on params to ensure that the passed parameter type is correct.
    • Concise URL path: params parameters appear in the URL path, which can make the URL path more concise and meaningful.

  • Disadvantages:

    • Not suitable for passing multiple parameters: The params parameter is usually used to pass a single parameter and is not suitable for passing multiple parameters at the same time.
    • Inconvenient to parse and construct URLs: Compared with query parameters, params parameters are relatively troublesome for URL parsing and construction, and need to be defined and matched in routing configuration.

To sum up, query and params have their own advantages and disadvantages in different scenarios and requirements. You can choose which method to use to pass parameters according to your specific needs

Encapsulation

In Vue Router, you can encapsulate query and params through custom functions or plug-ins, so that it can be used more conveniently in the application.

The following are examples of the two encapsulation methods:

1. Custom function encapsulation:

You can create a custom function to handle the value passing method of query and params. For example, you can create a function called setRouteQuery that sets the query parameter:

// 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')

Then, in your component, you can directly use the $setRouteQuery function to set the query parameter:

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

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

2. Plug-in package:

You can also create a plugin to use query and params pass-by-value throughout the application. For example, you can create a plugin called 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 })
    }
  }
}

Then, use the plugin in 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')

You can now use $setRouteQuery and $setRouteParams throughout your application to set query and params parameters :

<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>

By encapsulating custom functions or plug-ins, you can more conveniently use query and params to pass values, and reuse these encapsulated functions throughout the application.