Как обрабатывать маршрутизацию в Vue с помощью Vue Router

Vue Router, официальный маршрутизатор для Vue, позволяет создавать одностраничные приложения (SPA) в Vue. Vue Router позволяет сопоставлять компоненты вашего веб-приложения с различными маршрутами браузера, управлять стеком истории вашего приложения и настраивать расширенные параметры маршрутизации.

Начало работы с маршрутизатором Vue

Чтобы начать работу с Vue Router, запустите следующее npm (менеджер пакетов узла) в предпочитаемом каталоге для создания приложения Vue:

npm create vue 

Когда будет предложено добавить Vue Router для Одностраничное приложение развитие, выбрать Да.

Затем откройте свой проект в предпочитаемом вами текстовом редакторе. Ваше приложение источник каталог должен включать маршрутизатор папка.

маршрутизатор папка содержит index.js файл, содержащий код JavaScript для обработки маршрутов в вашем приложении. index.js файл импортирует две функции из vue-маршрутизатор упаковка: создать маршрутизатор и создатьWebHistory.

создать маршрутизатор Функция создает новую конфигурацию маршрута из объекта. Этот объект содержит история и маршруты ключи и их значения. маршруты key — это массив объектов, детализирующих конфигурацию каждого маршрута, как показано на изображении выше.

После настройки маршрутов вам необходимо экспортировать этот маршрутизатор экземпляр и импортировать этот экземпляр в main.js файл:

import'./assets/main.css'
import { createApp } from'vue'
import App from'./App.vue'
import router from'./router'
const app = createApp(App)
app.use(router)
app.mount('#app')

Вы импортировали маршрутизатор функции в main.js файл, а затем заставил ваше приложение Vue использовать эту функцию маршрутизатора с использовать метод.

Затем вы можете применить свои маршруты к своему приложению Vue, структурировав блок кода, аналогичный приведенному ниже: