Як я можу отримати параметри запиту з URL-адреси у Vue.js?

Як я можу отримати параметри запиту у Vue.js?

Напр http://somesite.com?test=yay.

Не можете знайти спосіб отримати чи мені для цього потрібно використовувати чистий JS чи якусь бібліотеку?

Згідно з документами об’єкта маршруту , у вас є доступ до $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(){
  },

Більш детальна відповідь, щоб допомогти новачкам VueJS:

• Спочатку визначте об’єкт маршрутизатора, виберіть режим, який вам здається потрібним. Ви можете оголосити свої маршрути всередині списку маршрутів.
• Далі ви хочете, щоб ваш основний додаток знав, що існує маршрутизатор, тому оголосити його всередині основної декларації програми.
• Нарешті, вони екземпляр $ route зберігає всю інформацію про поточний маршрут. Код консолірує журнал лише параметру, переданого в URL-адресі. (* Монтаж схожий на 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) - зіставити параметр запиту на опору у вашому маршрутизаторі. Тоді ви можете ставитися до цього, як і до будь-якої іншої опори у коді компонента. Наприклад, додайте цей маршрут;

{ 
    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

Ви можете використовувати 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функції ми не можемо отримати доступ до властивостями компоненти , як: this.propertyName.Т Ось чому я пройти vmдо nextfunction.It є recommented способом доступу до вю instance.Actually vmце означає вю , наприклад

Якщо ваша URL-адреса виглядає приблизно так:

somesite.com/something/123

Якщо '123' - це параметр з назвою 'id' (URL як / щось /: id), спробуйте:

this.$route.params.id

Ви можете отримати, використовуючи цю функцію.

console.log(this.$route.query.test)

Якщо ваш сервер використовує php, ви можете це зробити:

const from = '<?php echo $_GET["from"];?>';

Просто працює.