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

时间: 2023-09-30 22:06:44 浏览: 112

浅析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 应用中的路由。

this.$route.params是Vue Router中用于接收通过路由中的参数传递的值的方式。通过this.$route.params可以获取到路由中通过params传递的参数值。而this.$route.query则是用于接收通过路由中的查询参数传递的值的方式。通过this.$route.query可以获取到路由中通过query传递的参数值。两者的区别在于，params传参需要在路由定义中指定name，并且通过name来引入路由，而query传参则直接通过键值对的方式在URL中进行传递。另外，params传参在切换路由时使用的是name来指定目标路由，而query传参则使用path来指定目标路由。123 #### 引用[.reference_title] - *1* *2* *3* [vue中this.$route.query和this.$route.params & query传参和params传参的使用和区别](https://blog.csdn.net/weixin_44867717/article/details/109773945)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

阅读全文

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

相关推荐

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

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

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

this.$route.params 获取不到

那this.$route对象或者this.$route.query属性是未定义的该如何定义

this.$router和this.$route

async mounted() { this.queryUserMeets(this.$route.params.type);分析

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

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

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

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

最新推荐

白色大气风格的建筑商业网站模板下载.rar

RStudio中集成Connections包以优化数据库连接管理

管理建模和仿真的文件

Keil uVision5全面精通指南

flink提交给yarn19个全量同步MYsqlCDC的作业，flink的配置参数怎样设置

PHP博客旅游的探索之旅

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

【单片机编程实战】：掌握流水灯与音乐盒同步控制的高级技巧

java 号码后四位用‘xxxx’脱敏

Arachne:实现UDP RIPv2协议的Java路由库