更详细的答案，帮助VueJS的新手:

首先定义路由器对象，选择适合的模式。 您可以在路由列表中声明您的路由。 接下来，你想让你的主应用程序知道路由器的存在，所以在主应用程序声明中声明它。 最后$route实例保存当前路由的所有信息。这段代码将控制台记录在url中传递的参数。(*Mounted类似于document。Ready，即在应用程序准备就绪时立即调用它)

还有代码本身:

<script src="https://unpkg.com/vue-router"></script>
var router = new VueRouter({
    mode: 'history',
    routes: []
});
var vm =  new Vue({
    router,
    el: '#app',
    mounted: function() {
        q = this.$route.query.q
        console.log(q)
    },
});

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

以下代码输出:1439990638887137282

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

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

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

this.$route.params.yourProperty

而不是

this.$route.query.yourProperty

Vue 3组合API

(截至2021年，vue-router 4)

import {useRoute} from "vue-router";

//can use only in setup()
useRoute().query.test

or

//somewhere in your src files
import router from "~/router";

//can use everywhere 
router.currentRoute.value.query.test  

or

import {useRouter} from "vue-router";

//can use only in setup()
useRouter().currentRoute.value.query.test

另一种方法(假设您使用vue-router)是将查询参数映射到路由器中的道具。然后，您可以像对待组件代码中的其他道具一样对待它。例如，添加此路由;

{ 
  path: '/mypage', 
  name: 'mypage', 
  component: MyPage, 
  props: (route) => ({ foo: route.query.foo }),  
}

然后在你的组件中，你可以像往常一样添加道具;

props: {
  foo: {
    type: String,
    default: null,
  }
},

那么它将以这样的形式出现。Foo，你可以做任何你想做的(像设置一个观察者，等)。