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

根据route object的文档，你可以从你的组件中访问$route对象，它公开了你需要什么。在这种情况下

//from your component
console.log(this.$route.query.test) // outputs 'yay'

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

import { useRoute } from 'vue-router'

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

更详细的答案，帮助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)
    },
});

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

你可以使用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实例