Vue.js 传递路由参数和查询参数

轻口味2025-01-26 19:33

Vue.js 传递路由参数和查询参数

在 Vue.js 开发中，Vue Router 提供了灵活的方式来处理路由参数和查询参数，使得组件能够根据不同的路径或查询条件渲染相应的内容。

路由参数

路由参数（也称为路径参数）是 URL 路径的一部分，用于标识特定的资源或内容。在 Vue Router 中，可以通过在路由路径中使用冒号 : 定义动态路由参数。

定义动态路由

首先，在路由配置中定义带有参数的路径：

javascript 复制代码

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

Vue.use(VueRouter);

const routes = [
  { path: '/user/:id', component: User },
];

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

export default router;

在上述配置中，/user/:id 表示 id 是一个动态参数，可以匹配 /user/1、/user/2 等路径。

访问路由参数

在目标组件中，可以通过 this.$route.params 访问路由参数：

vue 复制代码

<template>
  <div>
    <h2>用户 ID: {{ userId }}</h2>
  </div>
</template>

<script>
export default {
  computed: {
    userId() {
      return this.$route.params.id;
    },
  },
};
</script>

通过上述方式，组件可以根据路由参数渲染相应的内容。

查询参数

查询参数是 URL 中 ? 后面的键值对，用于传递额外的信息。在 Vue Router 中，查询参数不需要在路由配置中声明，可以直接在导航时传递。

传递查询参数

可以通过 router.push 方法传递查询参数：

javascript 复制代码

this.$router.push({ path: '/search', query: { keyword: 'Vue' } });

上述代码会导航到 /search?keyword=Vue。

访问查询参数

在目标组件中，可以通过 this.$route.query 访问查询参数：

vue 复制代码

<template>
  <div>
    <h2>搜索关键词: {{ keyword }}</h2>
  </div>
</template>

<script>
export default {
  computed: {
    keyword() {
      return this.$route.query.keyword;
    },
  },
};
</script>

通过上述方式，组件可以根据查询参数执行相应的逻辑。

总结

路由参数 ：作为 URL 路径的一部分，需要在路由配置中定义，访问时使用 this.$route.params。
查询参数 ：作为 URL 中 ? 后的键值对，无需在路由配置中定义，访问时使用 this.$route.query。

合理使用路由参数和查询参数，可以使 Vue.js 应用的路由设计更加灵活和强大。