示例:http://localhost:9528/#/course/outline/1439990638887137282

以下代码输出:1439990638887137282

this.courseId = this.$route.params.id
console.log('courseId', this.courseId)

你可以使用vue-router。下面是一个例子:

url: www.example.com ?名字= john&lastName =能源部

new Vue({
  el: "#app",
  data: {
    name: '',
    lastName: '',
  },
  beforeRouteEnter(to, from, next) {
    if(Object.keys(to.query).length !== 0) { //if the url has query (?query)
      next(vm => {
        vm.name = to.query.name;
        vm.lastName = to.query.lastName;
      });
    }
    next();
  }
})

注意:在beforeRouteEnter函数中，我们不能访问组件的属性，例如:this.propertyName。这就是为什么我把vm传递给下一个函数。这是访问vue实例的推荐方式。实际上，vm代表vue实例

在这里的答案之上，我建议您使用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

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

没有vue-router，拆分URL

var vm = new Vue({
  ....
  created() {
    let uri = window.location.href.split('?');
    if(uri.length == 2) {
      let vars = uri[1].split('&');
      let getVars = {};
      let tmp = '';
      vars.forEach(function(v) {
        tmp = v.split('=');
        if(tmp.length == 2)
          getVars[tmp[0]] = tmp[1];
      });
      console.log(getVars);
      // do 
    }
  },
  updated() {
  },
....

另一个解决方案https://developer.mozilla.org/en-US/docs/Web/API/HTMLHyperlinkElementUtils/search:

var vm = new Vue({
  ....
  created() {
    let uri = window.location.search.substring(1); 
    let params = new URLSearchParams(uri);
    console.log(params.get("var_name"));
  },
  updated() {
  },
....

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

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

this.$route.params.yourProperty

而不是

this.$route.query.yourProperty