this.$route.params与this.$route.query的用法

时间: 2023-09-30 15:08:17 浏览: 231

浅析vue-router中params和query的区别

Vue Router 是 Vue.js 应用程序中用于管理路由的核心库，它使得页面导航变得简单而直观。在 Vue Router 中，`params` 和 `query` 是两种不同的参数传递方式，它们在使用场景和表现形式上有所差异。以下是关于 `params` 和 `query` 的详细解析。 1. 引入方式： - `query` 参数通常与动态路径中的 `path` 搭配使用。在定义路由时，你可以使用动态段（如 `/detail/:id`），然后通过 `this.$router.push` 将 `query` 参数添加到路径中。例如： ```javascript this.$router.push({ path: 'test', query: { type: 2, detail: '哈哈' } }); ``` - `params` 参数则与 `name` 属性配合使用。同样地，你需要先定义一个带有命名路由的动态段，如 `name: 'test', path: '/detail/:type'`，然后通过 `this.$router.push` 使用路由名称和对应的 `params` 参数： ```javascript this.$router.push({ name: 'test', params: { type: 2, detail: '哈哈' } }); ``` 2. URL 表现： - `query` 参数会直接显示在 URL 的查询字符串中，以 `?` 开头，例如 `http://localhost:8080/detail?type=0&detail=哈哈`。这些参数可以被浏览器或服务器记录，同时也易于分享。 - `params` 参数不会显示在 URL 的查询字符串中，而是嵌入到动态段中，如 `http://localhost:8080/detail/0`。这些参数只存在于当前的视图上下文中，不会被浏览器或服务器记录。 3. 使用场景与特性： - `query` 类似于 HTTP GET 请求，适合传递非关键性的、可选的数据，或者用户可能希望书签或分享的 URL。因为它们是可见的，所以对于隐私敏感的数据不建议使用 `query`。 - `params` 类似于 HTTP POST 请求，适合传递关键性的数据，这些数据不应在 URL 中显示。然而，`params` 有一个限制，即当路由模式改变时，如果 `params` 发生变化，Vue Router 会认为这是进入了一个新的路由，从而触发组件的生命周期钩子。 4. 参数获取： - 在组件内部，你可以通过 `this.$route` 访问当前路由的信息。对于 `query` 参数，你可以通过 `this.$route.query` 访问，如 `this.$route.query.type` 和 `this.$route.query.detail`。 - 对于 `params` 参数，访问方式类似，即 `this.$route.params`，如 `this.$route.params.type` 和 `this.$route.params.detail`。需要注意的是，`params` 参数仅在对应的动态段存在时有效。 5. 更新参数： - 当需要更新 `query` 或 `params` 时，可以使用 `this.$router.push` 并传递新的参数对象。对于 `query`，URL 将立即更新，而 `params` 则会导航到一个新的路由实例（如果 `params` 发生变化）。 6. 历史记录： - `query` 参数的变化会体现在浏览器的历史记录中，用户可以通过前进和后退按钮浏览不同的 `query` 状态。 - `params` 变化也会创建新的历史记录条目，但仅限于 `params` 的变化，而不是整个路径。选择使用 `params` 还是 `query` 主要取决于你的需求：如果你需要在 URL 中显示参数，或者参数不敏感且可能被分享，那么 `query` 是更好的选择；相反，如果你需要传递敏感数据，或者希望保持 URL 的简洁，那么 `params` 更合适。理解这些区别可以帮助你更好地设计和管理 Vue 应用中的路由。

在Vue.js中，`this.$route.params`和`this.$route.query`是两种获取路由参数的不同方式。 `this.$route.params`是一个对象，包含了当前路由中的动态路由参数。例如，如果你有一个路由为`/user/:id`，那么你可以通过`this.$route.params.id`来获取当前的`id`。 `this.$route.query`也是一个对象，包含了当前路由中的查询参数。例如，如果你有一个路由为`/user?id=123`，那么你可以通过`this.$route.query.id`来获取当前的`id`。需要注意的是，动态路由参数和查询参数可以同时存在于同一个路由中。例如，一个路由为`/user/:id?name=John`，那么你可以通过`this.$route.params.id`和`this.$route.query.name`来获取它们的值。总之，`this.$route.params`和`this.$route.query`都是非常方便的获取路由参数的方法，你可以根据自己的需求选择其中的一种或两种同时使用。

阅读全文

this.$route.params与this.$route.query的用法

相关推荐

vue.js this.$router.push获取不到params参数问题

解决vue.js this.$router.push无效的问题

this.$router和this.$route

this.$route.params 获取不到

this.$route.query.redirect里的query可不可以用params,为什么

用async，await改写这段代码 let params = { sourceOrderCode:this.$route.query.sourceOrderCode } this.searchChange(params,done)

vue 深度监听 this.$route.query

const { params, query } = this.$route

vue2 深度监听 this.$route.query

用async，await改写这段代码 mounted(){ let params = { sourceOrderCode:this.$route.query.sourceOrderCode } this.searchChange(params,done) },

this.$route

this.$route.push操作中，query的参数与params的参数有何不同

this.$route.push

this.$u.route this.$u.route 如何传递参数

this.$u.route this.$u.route 如何传递对象

this.$route如何使用

清除下面代码的定时器 mounted(){ let params = { sourceOrderCode:this.$route.query.sourceOrderCode } setTimeout(() =>{ this.searchChange(params,done) },100) },

this.$route.params和this.$route.query

最新推荐

RuoYi-Vue3(1).zip

MATLAB实现小波阈值去噪：Visushrink硬软算法对比

管理建模和仿真的文件

【交互特征的影响】：分类问题中的深入探讨，如何正确应用交互特征

c语言从链式队列 中获取头部元素并返回其状态的函数怎么写

易语言实现画板图像缩放功能教程

"互动学习：行动中的多样性与论文攻读经历"

【交互特征：优化与调试的艺术】：实战技巧，提升回归模型与分类模型的性能

用IDEA写一个高速收费系统框架附带代码

大模型推荐系统: 优化算法与模型压缩技术

c语言从链式队列中获取头部元素并返回其状态的函数怎么写