小开

最佳答案

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

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

小开

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

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() {
},
....

小开

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

url: www.example.com?name=john&lastName=doe

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函数中，我们不能访问组件的属性，例如:这就是为什么我把vm传递给next函数。这是访问vue实例的推荐方式。实际上vm代表vue实例

小开

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

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

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

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

然后它将作为this.foo可用，你可以对它做任何你想做的事情(比如设置一个监视器等)。

小开

截至目前，正确的根据动态路由文档方式是:

this.$route.params.yourProperty

而不是

this.$route.query.yourProperty

小开

如果你的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 3组合API

(截至2021年，vue-router 4)

import {useRoute} from "vue-router";


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

或

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


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

或

import {useRouter} from "vue-router";


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

小开

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

import { useRoute } from 'vue-router'


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

小开

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

下面代码输出:1439990638887137282

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

小开

有一件事要记住，如果你使用Hash模式，那么不要使用这个。$route.params.name只使用Url搜索参数

小开

在这里的答案之上，我建议您使用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中选择root组件，然后在你的控制台中使用

$vm0.$route.query

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

$vm0.proxy.$route.query

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

如何从Vue.js中的URL获取查询参数?

Vue 3组合API