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

2020/10/07 02:41 · javascript ·  · 0评论

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

例如http://somesite.com?test=yay

无法找到一种获取方式,或者我需要为此使用纯JS或某些库吗?

根据route object的文档,您可以$route从组件中访问对象,这暴露了您的需求。在这种情况下

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

如果没有vue-route,请分割网址

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/zh-CN/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(){
  },

帮助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)是将查询参数映射到路由器中的prop。然后,您可以像对待组件代码中的其他任何道具一样对待它。例如,添加此路线;

{ 
    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

如果您的网址看起来像这样:

somesite.com/something/123

其中“ 123”是名为“ id”的参数(网址类似于/ something /:id),请尝试以下操作:

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。这就是为什么我将vmtonext函数传递vm它。这是访问vue实例的推荐方式。实际上,它代表vue实例

您可以通过使用此功能获得。

console.log(this.$route.query.test)
本文地址:http://javascript.askforanswer.com/ruhecongvue-jszhongdeurlhuoquchaxuncanshu.html
文章标签: ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!