Vue3——getUrlKey接收静态页面URL中携带的参数

从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通过正则的方式接收并解析出来