在这里的答案之上，我建议您使用Vue devtools进行进一步调试。

给出这段代码

<template>
  <div>
    {{ showOrNotTheMessage }}
  </div>
</template>

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

例如，它将主要显示一个条件字符串。

如果你想进一步调试你正在做的事情(使用Options或Composition API)，你可以在Vue devtools中选择根组件，然后在控制台中访问整个Vue实例

$vm0.$route.query

PS:在Vue3中，你需要使用以下方法

$vm0.proxy.$route.query

这可以帮助您更快地调试代码，并可能找到很酷的东西来玩。

如果你的url看起来像这样:

somesite.com/something/123

其中'123'是一个名为'id'的参数(url类似/something/:id)，尝试使用:

this.$route.params.id

试试这段代码

var vm = new Vue({
  created() {
    let urlParams = new URLSearchParams(window.location.search);
    console.log(urlParams.has('yourParam')); // true
    console.log(urlParams.get('yourParam')); // "MyParam"
  },
});

下面是如何做到这一点，如果你正在使用vue-router与ve3组合api

import { useRoute } from 'vue-router'

export default {
  setup() {
    const route = useRoute()
    console.log(route.query)
  }
}

到目前为止，根据动态路由文档，正确的方式是:

this.$route.params.yourProperty

而不是

this.$route.query.yourProperty

有一件事要记住，如果你正在使用哈希模式，那么不要使用这个