在 Vue 路由中进行参数传递

简介：
Vue.js 是一款流行的前端框架，在构建单页面应用（SPA）中发挥着关键作用。作为 Vue Router 的重要组成部分，它为实现跨路由数据通信提供了简便方法。在 SPA 中，我们通常需要通过组件间传递参数来共享数据。为此，Vue Router 提供了两种主要的参数传输方式：通过 URL 查询和使用 route params。下面将分别探讨这两种方法的特点及其适用场景。在Query功能中进行参数传递时 **方法**：借助 `query` 对象进行参数传递，这些参数将以查询字符串的形式作为 URL 后面部分添加。```javascript 导航到详情页并传参 this.$router.push({ path: detail, query: { id: id } }); ```该组件的目标部分可以通过 `$this.$route.query` 调用获取相关组件的路径信息。```javascript 在 Detail 组件中获取参数 const id = this.$route.query.id; ``` **特点**： URL字段中包含的参数信息对用户是公开的。 通过历史模式设置，可将URL中的#符号隐藏起来，但仍然保留其查询参数。 没有数量上限的字段配置有助于灵活地支持多参数传输。 无论页面如何刷新，用户只需提交一次请求即可获取最新参数值，这得益于浏览器对URL的持久化支持。 ### 2. 参数传递该实现采用`params`对象进行参数传递，使得所传递的参数直接构成请求路径的一部分```javascript 导航到详情页并传参 this.$router.push({ name: Detail, params: { id: id } }); ```位于目标组件里，利用 `this.$route.params` 获取或读取参数。```javascript 在 Detail 组件中获取参数 const id = this.$route.params.id; ``` **特点说明如下：** - 在URL路径中不呈现参数信息，显著提升了用户体验。 - 只能与动态路由配置中的对应部分匹配，例如`path: detail:id`。 - 刷新页面后若未在路由设置中定义的参数将失去该信息，因为浏览器不会存储非预设参数。 - 仅识别固定的、预先定义的字段，并专为唯一标识特定对象（如ID）而设计。 采用$Q\bigcup P$模型进行参数设置与查询项的合理搭配，能够有效实现基于混合策略的智能推荐算法设计。有时候，结合使用查询参数和URL参数可能是必要的。例如，在传递一个ID时（建议采用URL参数），或者当想传输一些非关键数据，如用户权限（更适合通过查询参数）。```html 前往 Detail 页面 ``````javascript 接收 created () { const id = this.$route.params.id; const token = this.$route.query.token; } ``` 在传输参数时，采用何种方法取決于具体应用场景。若需确保参数在用户端的透明显示，并且即使页面刷新后仍能保持原有参数值，则使用 `params` 会更合适。若无Mindset 偏好将参数嵌入URL中，同时又需处理多个参数或通过浏览器历史追踪参数的变化，则采用 `query` 方式更为适宜。综合来看，在实际应用开发过程中，灵活选择使用 `params` 或 `query` 可显著提升数据传输效率和用户体验。