Как передать параметры URL для Vue.js?

Question

[iAlex195]

Я делаю приложение на Laravel и Vue.js. Мне стало интересно, как передать параметр URL, например идентификатор пользователя или slug пользователя, чтобы использовать это для вывода записей пользователя на его личную страницу.

Например, если нажать на ссылку project.com/posts/vasya, то выводятся все записи этого пользователя.

Сейчас код выглядит следующим образом:

const app = new Vue({
    el: '#app',
    data: {
       posts: [],
    },

   created(){

    	axios.get('project.com/posts/{slug}')
  			.then(response => {
  				console.log(response);
  				this.posts = response.data;

  			})
  			.catch(function (error) {
  				console.log(error);
  			});

    },

Нашел информацию про vue-router, но пока не понятно как его использовать в этом случае.
Заранее спасибо!

Answer 1

[Shahob I]

Используйте vue-router
https://router.vuejs.org/ru/essentials/dynamic-mat...

Пример роута

const router = new VueRouter({
  routes: [
    { path: '/post/:slug', component: User }
  ]
})

watch: {
      '$route'(to) {
         axios.get(`project.com/posts/${to.params.slug}`).then();
       }
}

Answer 2

[hopeful_romantic]

axios.get('project.com/posts/' + slug)

Comments

[iAlex195]

А в slug что нужно указать?

[hopeful_romantic]

в slug указываешь параметр, который хочешь передать
axios.get('project.com/posts/' + vasya)

[iAlex195]

hopeful_romantic, А если там еще куча пользователей, которых просто не реально будет задать в переменную? Есть ли какой-то шаблон? В Laravel в роутах можно указать Route::get('/profile/{slug}'), можно ли сделать что-то на подобии в js файле моего примера?

[hopeful_romantic]

axios.post('/project.com/posts', {
    firstName: 'John',
    lastName: 'Smith',
    yourDataArray: [1, 2, 3]
  })