vue中路径参数及查询参数获取

// 使用路径参数(需要在路由配置中定义参数)
this.$router.push({ path: `/chat/${userId}` });
 
// 使用查询参数
this.$router.push({ path: '/chat', query: { userId: '123' } });

目标组件中获取参数

// 对于路径参数,在目标组件中使用$route.params获取
created() {
  const userId = this.$route.params.userId;
},
 
// 对于查询参数,在目标组件中使用$route.query获取
created() {
  const userId = this.$route.query.userId;
}

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue获取URL参数有多种方法。一种常用的方法是使用"vue-router"插件来获取URL参数。通过使用`this.$route.query`可以获取到URL查询参数。例如,如果URL为`https://example.com/?name=John&age=25`,我们可以使用`this.$route.query.name`来获取"name"参数的值,使用`this.$route.query.age`来获取"age"参数的值。这种方法适用于使用"vue-router"插件进行路由管理的情况。 另一种方法是通过JavaScript原生方式获取URL参数。可以使用`window.location.search`获取URL查询字符串部分,然后使用正则表达式或其他方法进行解析。例如,可以使用以下代码获取URL参数值: ```javascript let url = window.location.search; let params = new URLSearchParams(url); let paramName = params.get('paramName'); ``` 其,"paramName"是需要获取参数名。这种方法适用于不使用"vue-router"插件的情况。 综上所述,Vue获取URL参数的方法包括使用"vue-router"插件的`this.$route.query`属性和使用JavaScript原生方式的`window.location.search`结合正则表达式或`URLSearchParams`来解析URL参数。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [vue 获取url地址的参数](https://blog.csdn.net/qq_42751978/article/details/130899303)[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: 50%"] - *2* [vue 获取url参数、get参数返回数组的操作](https://download.csdn.net/download/weixin_38605538/14661016)[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: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值