logo标签列表

如何在Vue.js中从URL获取查询参数？

javascriptvue.jsvue-routerurl-parametersquery-string
544

我如何在Vue.js中获取查询参数？

例如：

http://somesite.com?test=yay

我找不到获取数据的方法，是需要使用纯JS或某个库吗？

21
为什么这个被点踩了？我需要它用于Vue.js。如果有一些Vue库或内置的东西，那比原始的js更好。 - Rob
72
没有任何一份内容是近似复制的。[tag:vue.js] 是一个具有特定逻辑的框架，与纯 JavaScript 不同。 - Yerko Palma
27
没有使用vue-router，如何实现这个目标？ - Connor Leech
@ConnorLeech 不确定为什么你想跳过vue-router，因为它是专为Vue设计的。请使用提供的API。 - kissu
14个回答
2
除了这里的答案，我建议您使用Vue开发工具进行进一步调试。
鉴于这段代码片段。
<template>
  <div>
    {{ showOrNotTheMessage }}
  </div>
</template>

<script>
export default {
  computed: {
    showOrNotTheMessage() {
      return this.$route.query?.lookingforthis
        ? 'Show this message'
        : 'Dont show this message'
    },
  },
}
</script>

这个示例主要会显示一个条件字符串。

如果您想进一步调试您正在使用的选项或组合 API，请在 Vue devtools 中选择 root 组件，然后在控制台中访问整个 Vue 实例。
$vm0.$route.query

注意：在 Vue3 中，您需要使用以下代码才能通过 Devtools 访问 Vue 实例。

$vm0.proxy.$route.query

enter image description here

那可以帮助您更快地调试代码，可能找到有趣的东西来玩耍。

1
在我的情况下，它是$vm0.proxy.$route.params.query。 - undefined
2
示例网址：http://localhost:9528/#/course/outline/1439990638887137282
以下代码输出：1439990638887137282 
this.courseId = this.$route.params.id
console.log('courseId', this.courseId)
1

如果您正在使用哈希模式，请记住不要使用this.$route.params.name，而是只使用url search param。

0

Vue 3 组合式 API：

首先将您的路由器连接上。
import router from '../../router'

然后要访问例如id，使用以下代码：
 router.currentRoute.value.params.id
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接