vue3 cdn 的方式，通过 URLSearchParams 来获取参数的信息。

花花鱼

已于 2024-07-05 14:22:51 修改

阅读量298

点赞数 3

于 2024-07-05 14:03:01 首次发布

本文链接：https://blog.csdn.net/jwbabc/article/details/140206826

版权

Vue3 同时被 2 个专栏收录

104 篇文章 0 订阅

订阅专栏

Spring Boot

24 篇文章 0 订阅

订阅专栏

1、CDN的方式引用相关js

<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>授权结果</title>
	<script src="https://unpkg.com/vue@3.4.27/dist/vue.global.prod.js"></script>
	<script src="https://unpkg.com/dayjs/dayjs.min.js"></script>
	<script src="https://unpkg.com/dayjs/plugin/customParseFormat.js"></script>
	<script src="https://unpkg.com/dayjs/plugin/weekday.js"></script>
	<script src="https://unpkg.com/dayjs/plugin/localeData.js"></script>
	<script src="https://unpkg.com/dayjs/plugin/weekOfYear.js"></script>
	<script src="https://unpkg.com/dayjs/plugin/weekYear.js"></script>
	<script src="https://unpkg.com/dayjs/plugin/advancedFormat.js"></script>
	<script src="https://unpkg.com/dayjs/plugin/quarterOfYear.js"></script>
	<link type="text/css" href="https://unpkg.com/ant-design-vue@4.2.3/dist/reset.css" media="screen" rel="stylesheet">
	<script src="https://unpkg.com/ant-design-vue@4.2.3/dist/antd.min.js"></script>
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

2、Result.html 获取参数的值

onMounted(() => {
					const queryString = new URLSearchParams(window.location.search);
					msg.value = queryString.get('msg');
});

注意：在传msg之前要encode下

例如：

@RequestMapping(path = "/myQrcode", method = RequestMethod.GET)
	public ModelAndView MyQrcode(@RequestParam(name = "msg", required = true) String msg, HttpServletRequest req,
			HttpServletResponse resp) {
		ModelAndView modelView = new ModelAndView();
		modelView.setViewName("Result");
		modelView.addObject("msg", msg);
		System.out.println(JSON.toJSONString(modelView));
		return modelView;
	}

try {
            String msg = "绑定成功";
			msg = URLEncoder.encode(msg,"utf-8");
		} catch (UnsupportedEncodingException e) {
			e.printStackTrace();
		}

import java.net.URLEncoder;

3、encode的参数，页面收到以后会自动decode，也就是会输出绑定成功。

4、URLSearchParams事例：

const paramsString = "q=URLUtils.searchParams&topic=api";
const searchParams = new URLSearchParams(paramsString);

// 迭代查询参数
for (let p of searchParams) {
  console.log(p);
}

console.log(searchParams.has("topic")); // true
console.log(searchParams.has("topic", "fish")); // false
console.log(searchParams.get("topic") === "api"); // true
console.log(searchParams.getAll("topic")); // ["api"]
console.log(searchParams.get("foo") === null); // true
console.log(searchParams.append("topic", "webdev"));
console.log(searchParams.toString()); // "q=URLUtils.searchParams&topic=api&topic=webdev"
console.log(searchParams.set("topic", "More webdev"));
console.log(searchParams.toString()); // "q=URLUtils.searchParams&topic=More+webdev"
console.log(searchParams.delete("topic"));
console.log(searchParams.toString()); // "q=URLUtils.searchParams"

https://developer.mozilla.org/zh-CN/docs/Web/API/URLSearchParams

详细的请参考上面的链接地址。