it-swarm.com.ru

Как передать параметры URL в Vuejs

Я создаю приложение с помощью laravel и VueJs, и мне было интересно, как правильно передать параметр url, например, slug пользователя или идентификатор пользователя, в vuejs, чтобы использовать этот параметр для выполнения запросов ajax?

Например, когда кто-то нажимает на ссылку, ведущую к

domain.com/user/john-appleseed

Я хочу сделать ajax-запрос в моем приложении vuejs с параметром «john-appleseed».

Каков «правильный/правильный» путь к этому?

Заранее спасибо!

10
Luuk Van Dongen

vue-router , вероятно, будет полезен здесь. Это позволяет вам определять ваши маршруты следующим образом:

router.map({
    '/user/:slug': {
        component: Profile,
        name: 'profile'
    },
})

Внутри вашего компонента Profile слаг для запрашиваемого пользователя станет доступен под this.$route.params.slug

Проверьте официальную документацию для деталей: http://router.vuejs.org/en/

5
jsphpl

Я полагаю, вы создаете компонент. Допустим, у вас есть кнопка внутри этого компонента, и при нажатии вы хотите выполнить действие (запрос AJAX или просто перенаправление).

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

HTML:

<my-component login-url="get_url('url_token')">

Ваш компонент JS:

export default {
    props: {
        loginUrl: {required: true},
    },
    ...
}

Затем вы можете получить доступ к параметру в компоненте как this.loginUrl.

Обратите внимание, что разница в имени параметра в HTML-части указывается как dash-notatinon, а в JS - как camelCase.

4
n1_

Вы можете получить URL ссылки, по которой вы щелкнули, а затем использовать этот URL для выполнения вашего запроса ajax.

methods: {
    load: function(elem, e) {
        e.preventDefault();
        var url = e.target.href;
        this.$http.get(url, function (data, status, request) {
            // update your vue 
        });
    },
},

И в вашем шаблоне вызовите этот метод, когда пользователь нажимает на ссылку:

<a href="domain.com/user/john-appleseed" v-on="click: load">link</a>
1
Needpoule

Если вы используете vue-router и хотите захватить параметры запроса и передать их реквизитам, вы можете сделать это следующим образом.

Вызываемый URL: http: // localhost: 8080/# /? Prop1 = test1 & prop2 = test2

MyComponent.vue

<template>
  <div>
    {{prop1}} {{prop2}}
  </div>
</template>
<script>
  export default {
    name: 'MyComponent',
    props: {
      prop1: {
        type: String,
        required: true
      },
      prop2: {
        type: String,
        default:'prop2'
      }
    }
</script>
<style></style>

маршрутизатор/index.js

import Vue from 'vue'
import Router from 'vue-router'
import MyComponent from '@/components/MyComponent'

Vue.use (Router) 
Vue.component ('my-component', MyComponent)

export default new Router ({
  routes: [
    {
      path: '/',
      name: 'MyComponent',
      component: MyComponent,
      props: (route) => ({
        prop1: route.query.prop1,
        prop2: route.query.prop2
      })
    }
  ]
})
0
Marc Bouvier