The difference between query and param in vue

The difference between query and param in Vue.js is that query accesses the data in the URL query string (such as ?key=value), while param accesses the data in the URL segment (such as path/to/resource/ :key/value). query can be updated dynamically, while param is reloaded on route navigation.

The difference between Query and Param in Vue.js

In the Vue.js routing system, query and param are two different ways to access the data passed in the URL.

query

• Access data passed through the URL query string in the format ?key=value.
• Accessed via this.$route.query.
• is often used to convey non-critical information such as filtering, sorting, and paging.
• Can be updated dynamically without reloading the page.

param

• Access the data passed through the URL segment, the format is path/to/resource/:key/value.
• Accessed via this.$route.params.
• is typically used to convey key information that identifies a resource or portion of a path.
• Will be reloaded during route navigation.

Example

// 路由定义
const router = new VueRouter({
  routes: [
    {
      path: '/users/:id',
      component: User
    }
  ]
});

// 组件内访问数据
const User = {
  mounted() {
    console.log(this.$route.params.id); // 访问 URL 段中的 "id"
    console.log(this.$route.query.filter); // 访问查询字符串中的 "filter"
  }
};

Summary

• query for access query The data in the string, param is used to access the data in the URL segment.
• query can be updated dynamically, param is reloaded during route navigation.
• Choose the appropriate access method based on data type and use case.

The above is the detailed content of The difference between query and param in vue. For more information, please follow other related articles on the PHP Chinese website!