Vue Js: Как получить параметры запроса в VUE JS

21/04/2022 18:06

В этом руководстве вы узнаете, как получить параметры строки запроса в приложении vue js. Обратите внимание, что иногда вам нужно получить параметры строки запроса, поэтому этот учебник поможет вам шаг за шагом понять, как вы можете получить параметры строки запроса в приложении vue js.

Как получить параметры запроса в VUE JS

Просто выполните следующие шаги и узнайте, как получить параметры строки запроса в приложении vue js:

Шаг 1 - Создайте новое приложение VUE JS

На этом шаге откройте терминал и выполните следующую команду, чтобы создать новое приложение vue js:

vue create my-app

Шаг 2 - Создать компонент

На этом этапе перейдите в каталог /src/components и создайте новый компонент с именем query-parameter.vue и добавьте в него следующий код:

<!DOCTYPE html>
<html>
<head>
    <title>How to Get Query Parameters In VUE JS</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://unpkg.com/vue-router"></script>
</head>
<body>
   
<div id="app"></div>
    
<script type="text/jаvascript">
    
  var router = new VueRouter({
    mode: 'history',
    routes: []
  });
   
  var myApp =  new Vue({
    router,
    el: '#app',
    mounted: function() {
        parameters = this.$route.query
        console.log(parameters)
    
        name = this.$route.query.name
        console.log(name)
   
    },
  });
    
</script>
   
</body>
</html>

Шаг 3 - Добавьте компонент в App.vue

На этом шаге посетите каталог /src/ и файл App.vue. А затем добавьте в него следующий код:

<template>
    <QueryParameter></QueryParameter>
</template>
 
<script>
import QueryParameter from './components/QueryParameter';
 
export default {
  components: {
    QueryParameter
  }
}
</script>

В этом руководстве вы узнали, как получить параметры строки запроса в приложении vue js.

Vue.js

0 + 0 -

MakeCodes
0
811