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

Попробуйте следующий код:

var vm = new Vue({
  created() {
    let urlParams = new URLSearchParams(window.location.search);
    console.log(urlParams.has('yourParam')); // true
    console.log(urlParams.get('yourParam')); // "MyParam"
  },
});

Этот код создает новое Vue-приложение и в методе created использует объект URLSearchParams для получения параметров из URL. Он проверяет, существует ли параметр с именем yourParam, и выводит его значение в консоль. Убедитесь, что в вашем URL действительно присутствует параметр yourParam, чтобы код работал корректно.

Чтобы разделить URL без использования vue-router, вы можете воспользоваться одним из двух рассмотренных методов.

Первый вариант, который вы привели, использует метод split() для извлечения параметров из 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);
      // здесь вы можете обработать полученные параметры
    }
  },
  updated() {
  },
....

Здесь мы используем window.location.href для получения текущего URL, затем разделяем его на основную часть и часть с параметрами запроса. Если в URL есть параметры (определяется по длине массива uri), то мы снова разделяем их на отдельные пары "ключ=значение" и сохраняем в объект getVars, который затем можно использовать по вашему усмотрению.

Второй метод более современный и удобный, используя URLSearchParams, что значительно упрощает обработку параметров запроса:

var vm = new Vue({
  ....
  created() {
    let uri = window.location.search.substring(1); 
    let params = new URLSearchParams(uri);
    console.log(params.get("var_name")); // замените "var_name" на нужный вам параметр
  },
  updated() {
  },
....

В этом примере мы используем window.location.search, который возвращает строку запроса, начиная с символа ?. С помощью URLSearchParams мы можем легко получить значение конкретного параметра, используя метод .get(). Это делает код чище и проще для понимания.

Выберите тот метод, который наилучшим образом соответствует вашим потребностям и стилю.

Более детальный ответ, чтобы помочь новичкам в Vue.js:

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

Вот сам код:

<script src="https://unpkg.com/vue-router"></script>
<script>
var router = new VueRouter({
    mode: 'history',
    routes: []
});

var vm = new Vue({
    router,
    el: '#app',
    mounted: function() {
        let q = this.$route.query.q;
        console.log(q);
    },
});
</script>

С этим кодом вы сможете начать использовать роутер в вашем приложении Vue.js. Не забудьте добавлять маршруты в массив routes, чтобы ваше приложение могло управлять различными страницами!

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

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

Затем в вашем компоненте вы можете добавить проп как обычно:

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

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

В Vue 3 с использованием Composition API и vue-router 4, есть несколько способов получить доступ к параметрам запроса. Вот три метода, которые вы можете использовать:

1. Использование useRoute(): Этот метод можно использовать только внутри функции setup().

   import { useRoute } from "vue-router";
   
   export default {
     setup() {
       const route = useRoute();
       const testQueryParam = route.query.test; // Доступ к параметру query
       return { testQueryParam };
     }
   }
   

2. Общедоступный доступ через экземпляр маршрутизатора: Этот способ позволяет получить доступ к текущему маршруту из любого места в вашем компоненте, однако лучше придерживаться подхода Composition API.

   import router from "~/router";
   
   export default {
     methods: {
       getTestQueryParam() {
         const testQueryParam = router.currentRoute.value.query.test; // Доступ к параметру query
         return testQueryParam;
       }
     }
   }
   

3. Использование useRouter(): Как и useRoute(), этот метод можно использовать только внутри функции setup(), но он предоставляет вам доступ к экземпляру маршрутизатора.

   import { useRouter } from "vue-router";
   
   export default {
     setup() {
       const router = useRouter();
       const testQueryParam = router.currentRoute.value.query.test; // Доступ к параметру query
       return { testQueryParam };
     }
   }
   

Каждый из этих методов имеет свои плюсы и минусы. Рекомендуется использовать useRoute() для получения данных о текущем маршруте, так как это более idiomatic решение в рамках Composition API.