Как обновить router-view при переходе страницы в Vue3?

В Vue 3 обновление <router-view> при переходе страницы происходит автоматически благодаря использованию нового маршрутизатора - vue-router версии 4. Он предлагает улучшенный и более простой способ работы с маршрутизацией.

Чтобы обновить <router-view> при переходе страницы, вам необходимо следовать нескольким шагам:

1. Установите vue-router версии 4 в ваш проект, если еще не установлен. Для этого выполните команду npm install vue-router@4 (если используете npm) или yarn add vue-router@4 (если используете yarn).

2. Создайте экземпляр маршрутизатора в вашем основном компоненте приложения (например, в файле main.js или main.ts). Импортируйте createRouter из vue-router и определите массив маршрутов.

import { createApp } from 'vue';
import { createRouter, createWebHistory } from 'vue-router';

import App from './App.vue';
import Home from './views/Home.vue';
import About from './views/About.vue';

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

createApp(App).use(router).mount('#app');

3. В вашем основном компоненте приложения (App.vue) разместите <router-view>. Это место, где будут отображаться компоненты в зависимости от активного маршрута.

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

4. Теперь вы можете определить компоненты для каждого маршрута и привязать их к определенным путям в вашем основном компоненте маршрутизатора. Например, создайте компоненты Home.vue и About.vue в отдельных файлах и укажите их в определениях маршрутов.

<template>
  <h1>Home Page</h1>
</template>

<script>
export default {
  name: 'Home'
};
</script>

<template>
  <h1>About Page</h1>
</template>

<script>
export default {
  name: 'About'
};
</script>

5. Теперь, при переходе по маршрутам / и /about, <router-view> будет автоматически обновляться и отображать соответствующие компоненты Home.vue и About.vue.

Дополнительно, в vue-router версии 4 были внесены некоторые изменения по сравнению с предыдущими версиями. Некоторые из наиболее заметных изменений включают:

- Вместо использования объекта routes теперь используется массив routes.

- Вместо метода Vue.use() для установки маршрутизатора, используется метод app.use().

- В createRouter() больше не передается ссылка на экземпляр Vue.

- Поддержка динамических маршрутов и именованных видов.

- Улучшенная поддержка встраиваемых роутеров.

Использование vue-router версии 4 вместе с Vue 3 предоставляет простой и эффективный способ управления маршрутами в приложении. Благодаря автоматическому обновлению <router-view> при переходе страницы, вы можете легко создавать многостраничные приложения и обеспечивать навигацию между страницами вашего приложения.