Как передать параметры URL в Vuejs
Я создаю приложение с помощью laravel и VueJs, и мне было интересно, как правильно передать параметр url, например, slug пользователя или идентификатор пользователя, в vuejs, чтобы использовать этот параметр для выполнения запросов ajax?
Например, когда кто-то нажимает на ссылку, ведущую к
domain.com/user/john-appleseed
Я хочу сделать ajax-запрос в моем приложении vuejs с параметром «john-appleseed».
Каков «правильный / правильный» путь к этому?
Заранее спасибо!
Решение
вя-маршрутизатор возможно, будет полезен здесь. Это позволяет вам определять ваши маршруты следующим образом:
router.map({
'/user/:slug': {
component: Profile,
name: 'profile'
},
})
В вашем Profile компонент, тогда слаг запрашиваемого пользователя станет доступен под this.$route.params.slug
Проверьте официальную документацию для деталей: http://router.vuejs.org/en/
Другие решения
Я полагаю, вы создаете компонент. Допустим, у вас есть кнопка внутри этого компонента, и при нажатии вы хотите выполнить действие (запрос 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.
Вы можете получить 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>
Если вы используете vue-router и хотите захватить параметры запроса и передать их реквизитам, вы можете сделать это следующим образом.
URL, который называется: HTTP: // локальный: 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
})
}
]
})