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

JavaScript

泡芙小胖

2020-03-09

如何在Vue.js中获取查询参数？

E.g. http://somesite.com?test=yay.

Can’t find a way to fetch or do I need to use pure JS or some library for this?

第325篇《如何从Vue.js中的URL获取查询参数？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共2个回答
小胖MandyGil 2020.03.09

你可以使用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。这就是为什么我将vmto next函数传递给vm它。这是访问vue实例的推荐方式。实际上，它代表vue实例

凯Sam 2020.03.09

截至目前，正确的方法是（我不知道为什么更改了它们）：

this.$route.params.yourProperty instead of this.$route.query.yourProperty

文件

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android