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

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

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

路由参数

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

定义动态路由

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

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 访问路由参数：

<template><div><h2>用户 ID: {{ userId }}</h2></div>
</template><script>
export default {computed: {userId() {return this.$route.params.id;},},
};
</script>

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

查询参数

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

传递查询参数

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

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

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

访问查询参数

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

<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 应用的路由设计更加灵活和强大。