Как получить параметры запроса в Vue.js?

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

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

Ответы (13)

Согласно документации объекта маршрута , у вас есть доступ к объекту $ route из ваших компонентов, который предоставляет то, что вам нужно. В данном случае

// из вашего компонента
console.log (this. $ route.query.test) // выводит 'yay'

Вот как это сделать, если вы используете vue-router с api композиции vue3

import { useRoute } from 'vue-router'

export default {
  setup() {
    const route = useRoute()
    console.log(route.query)
  }
}

одна вещь, о которой следует помнить, если вы используете режим хеширования, тогда не используйте его. $ Route.params.name используйте только параметр поиска URL

На эту дату правильный путь в соответствии с документами динамической маршрутизации:

this.$route.params.yourProperty

вместо

this.$route.query.yourProperty

Попробуйте этот код

var vm = new Vue ({
  созданный() {
    let urlParams = new URLSearchParams (window.location.search);
    console.log (urlParams.has ('yourParam')); // истинный
    console.log (urlParams.get ('yourParam')); // "MyParam"
  },
});

Более подробный ответ в помощь новичкам VueJS:

  • Сначала определите свой объект маршрутизатора, выберите режим, который вам кажется подходящим. Вы можете объявить свои маршруты внутри списка маршрутов.
  • Затем вы хотите, чтобы ваше основное приложение знало о существовании маршрутизатора, поэтому объявите его в объявлении основного приложения.
  • Наконец, экземпляр $ route содержит всю информацию о текущем маршруте. Код будет записывать в консоль только параметр, переданный в URL-адресе. (* Монтируется аналогично document.ready, т. Е. Вызывается, как только приложение будет готово)

И сам код:


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-route разделить URL

var vm = new Vue ({
  ....
  созданный() {
    пусть uri = window.location.href.split ('?');
    if (uri.length == 2) {
      пусть vars = uri [1] .split ('&');
      let getVars = {};
      пусть tmp = '';
      vars.forEach (функция (v) {
        tmp = v.split ('=');
        если (tmp.length == 2)
          getVars [tmp [0]] = tmp [1];
      });
      console.log (getVars);
      // делать
    }
  },
  updated () {
  },
....

Другое решение https://developer.mozilla.org/en-US/docs/Web/API/HTMLHyperlinkElementUtils/search:

var vm = new Vue ({
  ....
  созданный() {
    пусть uri = window.location.search.substring (1);
    let params = new URLSearchParams (uri);
    console.log (params.get ("имя_переменной"));
  },
  updated () {
  },
....

You can use vue-router.I have an example below:

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

Note: In beforeRouteEnter function we cannot access the component's properties like: this.propertyName.That's why i have pass the vm to next function.It is the recommented way to access the vue instance.Actually the vm it stands for vue instance

Если ваш URL выглядит примерно так:

somesite.com/something/123

Где «123» - это параметр с именем «id» (URL-адрес типа / something /: id), попробуйте:

this.$route.params.id

Пример URL: http://localhost: 9528 / # / course / outline / 1439990638887137282

Ниже вывод кодов: 1439990638887137282

this.courseId = this.$route.params.id
console.log('courseId', this.courseId)

API композиции Vue 3

(до 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

Вы можете получить, используя эту функцию.

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

Другой способ (при условии, что вы используете vue-router) - сопоставить параметр запроса с опорой в вашем маршрутизаторе. Затем вы можете рассматривать его как любую другую опору в коде вашего компонента. Например, добавьте этот маршрут;

{
  путь: '/ mypage',
  имя: 'моя страница',
  компонент: MyPage,
  реквизиты: (маршрут) => ({foo: route.query.foo}),
}

Затем в свой компонент вы можете добавить опору как обычно;

реквизит: {
  foo: {
    тип: String,
    по умолчанию: null,
  }
},

Тогда он будет доступен как this.foo, и вы сможете делать с ним все, что захотите (например, установить наблюдателя и т. Д.)

2022 WebDevInsider