vue params和query的区别（怎么定义 vue-router 的动态路由? 怎么获取传过来的值？）

时间: 2024-10-21 10:56:34

(部分内容来自网络，其真实性存疑，为了避免对您造成误导，请谨慎甄别。)

在 Vue Router 中，params 和 query 是两种常用的路由传参方式，它们有不同的使用场景和特点。

params vs query

1. params：

   - 定义：params 是通过路由路径定义的参数。定义时在路由的 path 中使用冒号 : 进行标记。

   - 特点：

     - 用于动态路由，可以直接在 URL 中嵌入。

     - 适用于需要描述资源的场景，如 /user/:id。

     - 传递的参数必须是字符串类型。

   - 获取：在组件中通过 this.$route.params 获取。

2. query：

   - 定义：query 是通过 URL 字符串传递的参数，通常以 ? 开头，后面跟着 key=value 的形式，可以有多个参数，通过 & 分隔。

   - 特点：

     - 多用于描述页面的状态或过滤条件，如 /search?keyword=vue&page=1。

     - 参数可以是字符串、数字等，可以包含多个键值对。

   - 获取：在组件中通过 this.$route.query 获取。

示例

1. 定义动态路由

以下是定义动态路由的示例：

javascript
import Vue from 'vue';
import Router from 'vue-router';
import User from '../components/User.vue';

Vue.use(Router);

const routes = [
  {
    path: '/user/:id',  // 动态路由使用 params
    component: User,
  },
];

const router = new Router({
  routes,
});

export default router;

2. 获取传过来的值

在目标组件 User.vue 中，你可以通过 this.$route.params 和 this.$route.query 来获取这些传递的值。

<template>
  <div>
    <h1>User ID: {{ userId }}</h1>
    <h2>Query Parameter: {{ keyword }}</h2>
  </div>
</template>

<script>
export default {
  computed: {
    userId() {
      // 通过 params 获取动态路由参数
      return this.$route.params.id;
    },
    keyword() {
      // 通过 query 获取查询参数
      return this.$route.query.keyword;
    },
  },
};
</script>

总结

- 使用 params 适合定义与资源相关的动态路由，可通过路径直接进行匹配。

- 使用 query 适合传递较多的附加信息，不影响路由的匹配。

这两种方式可根据具体需求选择使用，灵活组合使用可以帮助构建更复杂的 Vue 应用。