多种方式获取当前页面地址中的参数

本文介绍了如何在代码中定义一个公共方法getQueryParam,用于从URL中提取并解码参数,同时提及了使用`URLSearchParams`处理查询字符串的示例。
摘要由CSDN通过智能技术生成

代码中的公共方法

一code中

/**
 * @description 获取页面地址中的参数
 * @param {string} url(可以为空,为空即为当前页面地址)
 * @returns {object}
 */
export const getQueryParam = (url: string|null): CommonObjectType => {
	url = url === null ? window.location.href : url;
	const search = url.substring(url.lastIndexOf('?') + 1);
	const query = {};
	const reg = /([^?&=]+)=([^?&=]*)/g;
	search.replace(reg, (rs, $1, $2) => {
		const name = decodeURIComponent($1);
		let val = decodeURIComponent($2);
		val = String(val);
		query[name] = val;
		return rs;
	});
	return query;
};

const params = new URLSearchParams(window.location.search)
const code = params.get('code')
参数也是在对象中
  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
在Vue3,有多种方法可以获取当前路由。引用提到了一种方法,即使用`router.currentRoute.value`来访问当前路由对象。通过`.value`属性可以获取当前路由的信息,类似于Vue2的`this.$route`。这种方法在使用`ref`返回的对象时非常方便。 引用提供了四种不同的获取当前路由的方法。第一种方法是使用`import { useRouter } from 'vue-router'`来导入`useRouter`函数,并通过`router.currentRoute.value.fullpath`来获取完整的路径。 第二种方法是使用`getCurrentInstance`函数来获取当前实例,然后通过`proxy.$router.currentRoute.value.fullpath`来获取完整路径。 第三种方法是使用`toRaw`函数来获取原始的`router`对象,然后通过`toRaw(router).currentRoute.value.fullPath`来获取完整路径。 第四种方法是使用`watch`函数来监听`router`对象的变化,然后在回调函数通过`newValue.currentRoute.value.fullPath`来获取完整路径。 除此之外,引用还给出了一个示例,展示了在Vue3如何在组件获取当前路由的参数。在组件可以使用`const uid = router.currentRoute.value.params.uid`来获取路由参数。 所以,这里总结了Vue3获取当前路由的几种方法,包括使用`router.currentRoute.value`、`useRouter`、`getCurrentInstance`、`toRaw`和`watch`等。具体使用哪种方法取决于你的业务需求和对路由信息的具体访问方式。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [vue3:获取当前路由地址](https://blog.csdn.net/qq_46617584/article/details/126707927)[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_1"}}] [.reference_item style="max-width: 50%"] - *2* [【vue3】获取当前页面路由的四种方法](https://blog.csdn.net/qq_38974163/article/details/121762708)[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_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值