Vue3 — это популярная платформа JavaScript, которая предоставляет множество мощных функций для упрощения разработки интерфейса. Одной из важных функций является управление маршрутизацией. В Vue3 мы можем использовать Vue Библиотека маршрутизатора для реализации функций маршрутизации. В этой статье будут подробно представлены функции маршрутизации в Vue3, включая Установка и настройкаVue Router、Маршрутизация основная использование、динамическая маршрутизация、Вложенная маршрутизацияи т. д.。

Установка и настройка

Сначала нам нужно установить Vue Router. Vue Router можно установить в проект с помощью следующей команды:

npm install vue-router@4 --save

После завершения установки,В файле записи проекта（обычноmain.js）Настроить：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

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

Добавьте Vue Router в файл конфигурации и зарегистрируйте его как плагин для приложения Vue.

Следующий,Нам нужно создать файл конфигурации маршрутизации.（обычноrouter.js）,И настраиваем в нем информацию о маршрутизации:

import { createRouter, createWebHistory } from 'vue-router'
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
})

export default router

в файле конфигурации маршрутизации,мы используемcreateRouterФункция создает экземпляр маршрутизации,и пройтиcreateWebHistoryФункция создания режима истории браузера。Затем,существоватьroutesНастройте конкретную информацию о маршрутизации в массиве,Укажите путь, имя и соответствующий компонент.

Теперь мы завершили установку и базовую настройку Vue Router.

Основное использование

В Vue3,мы можем использовать<router-view>и<router-link>компонентыосознатьразгромленпоказыватьинавигация。

первый,существоватькорень проектакомпоненты（обычноApp.vue）Присоединяйтесь<router-view>компоненты,Используется для отображения компонентов, соответствующих текущему маршруту:

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

<script>
export default {
  name: 'App'
}
</script>

Затем,Где необходима навигация,использовать<router-link>компонентыдля создания ссылок：

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

<script>
export default {
  name: 'Navigation'
}
</script>

установивtoсвойство,Мы можем указать целевой путь ссылки.

Таким образом, мы выполнили самую базовую функцию маршрутизации. Когда пользователь нажимает навигационную ссылку, Vue Routerбудет основано на конфигурации в файле конфигурации маршрутизации,Загрузите соответствующий компонент,и отобразить его<router-view>середина。

динамическая маршрутизация

Vue Router также поддерживает динамическую маршрутизацию. Используя заполнители в пути, мы можем создавать маршруты с параметрами.

const routes = [
  {
    path: '/user/:id',
    name: 'User',
    component: User
  }
]

В приведенном выше коде,Мы определяем файл с именемUserмаршрутизация,Его путь/user/:id。idявляется заполнителем,Указывает, что эта часть пути может быть любой строкой.

существоватьUserкомпонентысередина,мы можем пройти$route.paramsдля доступа к параметрам маршрута：

<template>
  <div>
    User ID: {{ $route.params.id }}
  </div>
</template>

<script>
export default {
  name: 'User'
}
</script>

Когда пользователь получает доступ/user/123час,$route.params.idбудет отображаться как123。

Вложенная маршрутизация

В реальной разработке проекта нам часто приходится использовать Вложенную маршрутизация для построения сложных структур страниц. Вю Routerпредоставил Вложенная Функция маршрутизации позволяет нам более гибко организовать маршрутизацию.

const routes = [
  {
    path: '/dashboard',
    component: Dashboard,
    children: [
      {
        path: '',
        component: Overview
      },
      {
        path: 'profile',
        component: Profile
      },
      {
        path: 'settings',
        component: Settings
      }
    ]
  }
]

В приведенном выше коде,Мы определяем файл с именемDashboardмаршрутизация,Его путь/dashboard。существоватьDashboardкомпонентысередина,Мы можем определить вложенные подмаршруты. Путь дочернего маршрута определяется относительно родительского маршрута.

существоватьDashboardкомпонентышаблонсередина,мы можем использовать<router-view>компонентыдля рендеринга подмаршрутов：

<template>
  <div>
    <router-link to="/dashboard">Overview</router-link>
    <router-link to="/dashboard/profile">Profile</router-link>
    <router-link to="/dashboard/settings">Settings</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'Dashboard'
}
</script>

Корректируя путь,Можетсуществовать<router-link>середина Укажите различные подмаршруты。

охрана маршрута

Vue Роутер также обеспечивает охрану Функция маршрута, используемая для выполнения некоторой дополнительной логики при переключении маршрутизации. Часто используемая охрана маршрутавключать：

• beforeEach: Глобальная предварительная защита, вызываемая перед переключением маршрутизации.
• beforeResolve: Охранник глобального разрешения, вызванный до подтверждения маршрута.
• afterEach: Глобальный пост-сторож, вызываемый после переключения маршрутизации.
• beforeEnter: Эксклюзивная защита маршрута, вызываемая перед входом на маршрут.
• beforeRouteUpdate: Защита обновления маршрута, вызываемая перед компонентом повторного использования текущего маршрута.
• beforeRouteLeave: Охрана выхода из маршрута, вызываемая перед уходом из текущего маршрута.

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

Подвести итог

В этой статье мы подробно представляем функциональность маршрутизации в Vue3. Мы научились установке и настройкаVue Маршрутизатор и маршрутизация Главное использование、динамическая маршрутизация、Вложенная маршрутизацияиохрана маршрута и другой контент.

Правильно используя Vue Router, мы можем создавать сложные структуры страниц, реализовывать гибкую навигацию по маршрутизации и выполнять дополнительную логику при переключениях маршрутизации.