vue中获取当前页面URL中参数id

最新推荐文章于 2025-04-01 09:41:06 发布

原创最新推荐文章于 2025-04-01 09:41:06 发布 · 4.8k 阅读

7 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

当前文章被以下社区和专栏收录：

本文介绍了在Vue项目中如何从当前页面URL中获取特定参数，如'id'。首先在utils文件夹下创建getUrlParams.js，导出一个获取URL参数的函数。然后在需要使用该功能的页面导入此函数，并在beforeMount生命周期钩子中调用，通过参数名称获取对应的值，例如获取'share'参数并打印。

vue中获取当前页面URL中参数id

第一步：首先我们在utils文件夹下创建一个getUrlParams.js文件，在里面写入代码如下：

// 获取参数
export function GetUrlParam(name) {
  var url = window.location.href;

  let params = url.substr(url.lastIndexOf("?") + 1).split("&");
  for (let i = 0; i < params.length; i++) {
    let param = params[i];
    let key = param.split("=")[0];
    let value = param.split("=")[1];
    if (key === name) {
      return value;
    }
  }
}

第二步：在需要用到该方法的页面引入getUrlParams.js，最后，我们只要输入想要获取的参数名，就可以在页面中获取url上对应的id参数值咯！：

import { GetUrlParam } from "@/utils/GetUrlParam.js";

beforeMount() {
        this.isShare = GetUrlParam("share");
        console.log("我的share", this.isShare)
	}