Настройка маршрутизатора:
1. Установите vue-router с помощью npm или yarn:
```
npm install vue-router
```
2. Импортируйте vue-router и Vue в вашем файле main.js:
```javascript
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
```
3. Определите маршруты в отдельном файле, например, в router.js:
```javascript
import Home from './components/Home.vue'
import About from './components/About.vue'
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About }
]
const router = new VueRouter({
mode: 'history',
routes
})
export default router
```
В этом примере у вас есть два маршрута: '/' и '/about', которые отображают компоненты Home и About соответственно. Режим 'history' включает использование истории браузера для маршрутов без хеша (#).
4. Импортируйте файл router.js в main.js и передайте его в опции router:
```javascript
import Vue from 'vue'
import App from './App.vue'
import router from './router.js'
new Vue({
router,
render: h => h(App)
}).$mount('#app')
```
5. В вашем компоненте App.vue добавьте элемент router-view для отображения текущего маршрута:
```html
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
```
Выполнение ajax-запросов:
1. Установите axios с помощью npm или yarn:
```
npm install axios
```
2. Импортируйте axios в вашем компоненте:
```javascript
import axios from 'axios'
```
3. Выполните ajax-запрос с помощью axios:
```javascript
axios.get('/api/data')
.then(response => {
console.log(response.data)
})
.catch(error => {
console.error(error)
})
```
В этом примере мы выполняем GET-запрос к эндпоинту /api/data и выводим данные в консоль. Вы также можете использовать другие методы, такие как axios.post() или axios.put().
Использование vue-router для обновления контента при нажатии кнопки "назад" в браузере:
1. В вашем компоненте, где вы хотите обновить контент при нажатии кнопки "назад", добавьте обработчик события beforeRouteUpdate:
```javascript
beforeRouteUpdate(to, from, next) {
// Обновление контента при каждом изменении маршрута
this.fetchData()
next()
}
```
2. Внутри функции fetchData выполните необходимые ajax-запросы, чтобы получить новые данные:
```javascript
methods: {
fetchData() {
axios.get('/api/data')
.then(response => {
// Обновление контента с новыми данными
this.data = response.data
})
.catch(error => {
console.error(error)
})
}
}
```
3. Для сохранения истории переходов вы можете использовать vue-router и режим 'history', как указано выше. Таким образом, браузер будет сохранять историю переходов, и вы сможете использовать кнопку "назад" для возврата к предыдущим состояниям приложения.
Важно отметить, что для использования режима 'history' ваш сервер должен быть настроен на обслуживание вашего приложения Vue в любом маршруте. Это может быть достигнуто с помощью настройки .htaccess для Apache или перенаправления всех запросов к index.html для других серверов.