如何在没有Vue路由器的情况下获取url查询参数？

jk9hmnmh 于 2022-12-14 发布在 Vue.js

关注(0)|答案(2)|浏览(147)

我的Vue应用程序不需要路由，所以我没有将Vue路由器包添加到我的项目中。
给定 * App.vue * 的以下示例代码

<script setup lang="ts">
import { onMounted } from "vue";

onMounted(() => {
  const routeHashContent = window.location.hash.substring(1);
  const hashParameters = new URLSearchParams(routeHashContent);

  const hashParameter = hashParameters.get("foo");

  if (hashParameter === null) {
    console.log("not found.");

    return;
  }

  console.log(hashParameter);
});
</script>

<template />

我可以用网址调用应用程序
请参阅
有没有办法去掉哈希值呢？URL可能看起来像这样
您可以在
我应该使用哪个代码来代替const routeHashContent = window.location.hash.substring(1);来获取查询？

vue.js

来源：https://stackoverflow.com/questions/74685192/how-to-get-url-query-parameters-without-vue-router

2条答案

按热度按时间

vbkedwbf1#

可以使用以下命令创建URL对象

const url = new URL(window.location)

此对象包含作为变量searchParams的url搜索参数。
按如下方式访问参数。

const bar = url.searchParams.get('foo')

赞(0）回复(0）举报 2022-12-14

vulvrdjw2#

URLSearchParams是一个很好的方法-

const urlParams = new URLSearchParams(window.location.search);

const param1 = urlParams.get("token")

// Output will be null if there is no query param of named "token"
console.log(param1);

但是如果你没有使用一个完整的URL或者使用一个自定义的URL来解析参数，那么你需要首先创建一个自定义URL的URL对象，然后对它应用搜索。为什么？阅读这里。

// Non window URL, then need to create URL object
const queryURL = new URL("https://example.com/over/there?name=ferret&age=11");

// Then apply search on newly created object
const urlParams = new URLSearchParams(queryURL.search);

// Now, console the params,
console.log(urlParams.get("name"), urlParams.get("age"));

赞(0）回复(0）举报 2022-12-14

我来回答

如何在没有Vue路由器的情况下获取url查询参数？

2条答案

相关问题

热门标签

最新问答