如何在 Vue.js 中获取查询参数?
例如
http://somesite.com?test=yay
找不到获取方法,还是我需要为此使用纯 JS 或某些库?
根据 route object 的文档,您可以从您的组件访问 $route
对象,该对象公开您需要的内容。在这种情况下
//from your component
console.log(this.$route.query.test) // outputs 'yay'
没有vue-route,拆分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() {
},
....
location.search
可用时,您为什么要自己拆分 location.href
? developer.mozilla.org/en-US/docs/Web/API/… 例如var querypairs = window.location.search.substr(1).split('&');
用“=”分割查询名称-值对也并不总是有效,因为您也可以传递没有值的命名查询参数;例如 ?par1=15&par2
您的代码现在将在 par2 上引发异常,因为按 '=' 拆分将导致 tmp 只有 1 个元素。
undefined
分配给 getVars['par2']
。
.substring(1)
似乎是不必要的
试试这个代码
var vm = new Vue({
created() {
let urlParams = new URLSearchParams(window.location.search);
console.log(urlParams.has('yourParam')); // true
console.log(urlParams.get('yourParam')); // "MyParam"
},
});
帮助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)
},
});
<script src="https://unpkg.com/vue-router"></script>
new Vue({ router, ... })
不是有效的语法。
另一种方法(假设您使用 vue-router
)是将查询参数映射到路由器中的道具。然后,您可以像对待组件代码中的任何其他道具一样对待它。比如添加这条路线;
{
path: '/mypage',
name: 'mypage',
component: MyPage,
props: (route) => ({ foo: route.query.foo }),
}
然后在您的组件中,您可以正常添加道具;
props: {
foo: {
type: String,
default: null,
}
},
然后它将作为 this.foo
提供,您可以使用它做任何您想做的事情(例如设置观察者等)
截至目前,正确的方法 according to the dynamic routing docs 是:
this.$route.params.yourProperty
代替
this.$route.query.yourProperty
query
从 URL 获取查询。来自文档:除了 $route.params 之外,$route 对象还公开了其他有用的信息,例如 $route.query(如果 URL 中有查询)
{ path: '/user/:id' }
,url /user/123?a=b&c=d
将具有 $route.params == { id: "123" }
和 $route.query == { a: "b", c: "d" }
。
params
表示您的 URL
中的参数,例如 /user/:username
。您会看到 username
是 params
但 query params
与此 /search/?q='new Vue js'
相似,如您所见,new Vue js
是此处的查询参数。文件中没有任何内容可以证明您的答案。请告诉我你看到的是文件的哪一行?
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
如果您的网址看起来像这样:
somesite.com/something/123
其中 '123' 是一个名为 'id' 的参数(像 /something/:id 这样的 URL),请尝试:
this.$route.params.id
你可以使用 vue-router。我有一个例子如下:
网址: 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
函数中,我们无法访问组件的属性,例如:this.propertyName
。这就是我将 vm
传递给 next
函数的原因。这是访问 vue 的推荐方式instance.其实 vm
它代表 vue 实例
site.com/route?query=test
的最新 Laravel + Vue 设置中,当通过 beforeRouteEnter(to, from, next)
方法中的 to
参数访问时,query
参数返回 undefined
。任何想法为什么会这样?
如果您将 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)
您可以通过使用此功能获得。
console.log(this.$route.query.test)
不定期副业成功案例分享
vue-router
,那么这确实是重复的,因为他需要使用标准的 JS 方法。vue-router
标记并添加它。return next({ name: 'login', query:{param1: "foo" }, });
之类的操作是行不通的。在登录组件中,道具param1
未定义。