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


252

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

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

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


6
Почему за это проголосовали? Мне это нужно для Vue.js. Если есть какая-то библиотека vue или что-то встроенное, она будет предпочтительнее сырой js.
Роб

54
Там нет даже близко к дубликату. vue.js - это фреймворк со специфической логикой, отличной от vanila javascript
Ерко Пальма

13
Как это можно сделать без vue-router?
Коннор Лич,

Ответы:


345

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

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

8
Ага! Если он не использует, то vue-routerэто действительно будет дубликатом, так как ему нужно будет использовать стандартные методы JS.
Джефф

1
Я просто предполагаю, что, поскольку тот же пользователь разместил незадолго до вопроса о vue-router, я бы создал тег vue-router, если бы у меня была такая репутация
Yerko Palma

2
хорошая точка зрения! Я пошел вперед и создал vue-routerтег и добавил его.
Джефф

Проблема в том, что документация vue считает нежелательным подключение компонентов к маршрутизатору. Они рекомендуют передавать реквизиты, но не представляется возможным динамически передавать параметры запроса как реквизиты. Например, в страже beforeEach выполнение чего-то подобного return next({ name: 'login', query:{param1: "foo" }, });не работает. в компоненте входа в систему опора param1не определена.
Грано

45

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

2
Зачем вам разделять location.hrefсебя, когда есть в location.searchналичии? developer.mozilla.org/en-US/docs/Web/API/… Например, var querypairs = window.location.search.substr(1).split('&');разделение пар «имя-значение» запроса на «=» не всегда будет работать, поскольку вы также можете передавать именованные параметры запроса без значения; например, ?par1=15&par2ваш код теперь вызовет исключение для par2, так как разбиение по '=' приведет к tmp только с 1 элементом.
Артур

1
Извините, что не выдает исключение, но вы также не поймаете par2. Как вы в основном назначить undefinedв getVars['par2'].
Артур

Метод GET представляет собой строку (пары имя / значение), в URL
erajuan

@ Артур, ты прав, я добавил валидацию и добавил другие решения. спасибо
erajuan

37

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

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

И сам код:

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

7
Пожалуйста, объясните это
Мухаммед Муаззам

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

3
Для еще более невежественных новичков: VueRouter не включен в ядро ​​VueJS, поэтому вы можете включить VueRouter отдельно:<script src="https://unpkg.com/vue-router"></script>
rustyx

2
@Sabyasachi Отредактируйте свой ответ и добавьте эту информацию в само сообщение.
Саймон Форсберг,

1
new Vue({ router, ... })неверный синтаксис
Crescent Fresh

17

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

{ 
    path: '/mypage', 
    name: 'mypage', 
    component: MyPage, 
    props: (route) => ({ foo: route.query.foo })  
}

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

props: {
    foo: {
        type: String,
        default: null
    }
},

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


Это круто. Недостающий кусок головоломки - инициация. Вы можете сделать это следующим образом: `this. $ Router.push ({name: 'mypage', query: {foo: 'bar'})`
slf

7

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

this.$route.params.yourProperty

вместо того

this.$route.query.yourProperty

3
Они не одно и то же! Вы должны использовать, queryчтобы получить запросы от URL. Из документов: В дополнение к $ route.params объект $ route также предоставляет другую полезную информацию, такую ​​как $ route.query (если в URL есть запрос)
hatef

Спасибо за разъяснения :)
Марко

2

Вы можете использовать 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это означает вю , например


2

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

somesite.com/something/123

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

this.$route.params.id


-7

Если ваш сервер использует php, вы можете сделать это:

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

Просто работает.


4
Вопрос был в том, как сделать что-то с Vue, а не с PHP.
Робертмейн
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.