从HTML页面中的a链接里携带的参数要在vue3项目里接收到此参数
目前有两个项目一个静态项目一个vue项目,我需要从静态页面的链接跳转到Vue项目中,并且这两个项目可以通过参数进行关联
这里有两种方案:
一种是将静态页面中的id存在本地,在vue中通过获取本地id传给接口从而渲染页面
影响:可能会出现跨域
第二种通过getUrlKey.js获取URL地址栏中跳转携带的参数
步骤如下:
首先这里需要一个静态页面的url跳转到vue项目中
<a href="http://111.222.333.444:5175/index?id=59">链接</a>
在Vue页面中需要使用到getUrlKey.js
export function getUrlKey(name){
return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ""])[1].replace(/\+/g, '%20')) || null
}
在页面中调用
import {getUrlKey} from '../utils/getUrlKey/getUrlKey';
使用方法:getUrlKey('id')
通过query将此页面传接收过来的参数
onMounted(() => {
router.push({
query: {
id: getUrlKey("id"),
},
});
})
用route接收获取到的id参数
let objs = { id: route.query.id };
发送请求
getCoordinate(objs).then((res) => {...})
这时从静态页面的路径就会被getUrlKey通过正则的方式接收并解析出来