Как использовать router и ajax запросы?

Для использования router и выполнения AJAX-запросов в приложении на Vue.js, сначала вам понадобится установить необходимые пакеты.

1. Установите пакет vue-router с помощью npm:

npm install vue-router --save

2. Создайте файл router.js и добавьте следующий код для настройки маршрутизатора:

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

const router = new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/about',
      name: 'About',
      component: About
    },
    // добавьте другие пути здесь
  ]
})

export default router

3. В основном файле вашего приложения, где вы создаете экземпляр Vue, добавьте следующий код для подключения маршрутизатора:

import Vue from 'vue'
import App from './App.vue'
import router from './router'

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

Теперь вы можете использовать router-link для навигации по страницам:

<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>

Когда пользователь переходит на определенный URL, компонент, связанный с этим маршрутом, будет отображаться в основном выводе.

Что касается AJAX-запросов, вы можете использовать пакет axios, который предоставляет простой и гибкий интерфейс для выполнения HTTP-запросов.

1. Установите пакет axios с помощью npm:

npm install axios --save

2. В компоненте, где вы хотите выполнить AJAX-запрос, добавьте следующий код для импорта и использования axios:

import axios from 'axios'

axios.get('/api/data')
  .then(response => {
    // обработка успешного запроса
    console.log(response.data)
  })
  .catch(error => {
    // обработка ошибок
    console.error(error)
  })

В приведенном выше примере вы выполняете GET-запрос по указанному URL и обрабатываете успешный ответ в блоке then, а также обрабатываете ошибку в блоке catch.

Вы также можете выполнить другие типы запросов, такие как POST, PUT, DELETE, используя соответствующие методы axios.

Вот пример POST-запроса:

axios.post('/api/data', { name: 'John', age: 25 })
  .then(response => {
    // обработка успешного запроса
    console.log(response.data)
  })
  .catch(error => {
    // обработка ошибок
    console.error(error)
  })

Надеюсь, эта информация помогла вам разобраться с использованием router и AJAX-запросов в приложении на Vue.js. Удачи в разработке!