Ву.параметры запроса js

Question

Ву.параметры запроса js

Как я могу получить параметры запроса в vue.Джей?

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

Не могу найти способ получить или мне нужно использовать чистый JS или какую-то библиотеку для этого?

670 5

javascript vue.js vue-router url-parameters

5 ответов:

Comments

Ничего не найдено.

Yerko Palma · Accepted Answer · 2017-03-30 18:27:01

согласно документам маршрут объекта, у вас есть доступ к $route объект из ваших компонентов, которые предоставляют то, что вам нужно. В данном случае
//from your component
console.log(this.$route.query.test) // outputs 'yay'

Sabyasachi · Accepted Answer · 2017-12-17 08:51:13

более подробный ответ, чтобы помочь новичкам VueJs.

<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)
    },
});

erajuan · Accepted Answer · 2018-02-01 02:10:54

без 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(){
  },

roli roli · Accepted Answer · 2018-04-20 15:59:24

вы можете использовать вю-маршрутизатор.У меня есть пример ниже:

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()
  }
})
Примечание: на

Mike P · Accepted Answer · 2018-09-24 19:03:45

другой способ (если вы используете vue-router), является для сопоставления параметров запроса с опорой на вашем роутере. Тогда вы можете рассматривать его как любой другой реквизит в коде компонента. Например, добавьте этот маршрут;
{ 
    path: '/mypage', 
    name: 'mypage', 
    component: MyPage, 
    props: (route) => ({ foo: route.query.foo })  
}
затем в вашем компоненте вы можете добавить опору как обычно;
props: {
    foo: {
        type: String,
        default: null
    }
},
тогда он будет доступен как this.foo и вы можете делать с ним все, что хотите (например, установить наблюдателя и т. д.)