Vue3 Маршрутизация (Vue Router)

В этой главе мы рассмотрим маршрутизацию Vue.

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

С помощью Vue мы можем реализовывать одностраничные веб-приложения (SPA) с несколькими представлениями.

Маршрутизация Vue.js требует загрузки библиотекиvue-router

URL документации на китайском:документация vue-router。

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

На рисунке выше показанадвухуровневая вложенная структура маршрутов：

• верхнего уровня (App.vueиз<router-view>)отвечает за рендеринготдельных макетов(например,Login.vue) илимакет основного каркаса（Layout.vue）。
• макет основного каркаса (Layout.vue)внутри содержит второй<router-view>, используемый для рендерингадочерних компонентов функциональной страницы(например,Dashboard.vue、User.vue), таким образом обеспечивая постоянное отображение верхней панели, боковой панели и нижнего колонтитула.
• Несовпадающие пути в конечном итоге приведут к независимомуpage404.vue。

Основные компоненты

Установка

Установка с помощью npm

npm install vue-router

npm (Китайское зеркало)

Рекомендуется использовать зеркало Taobao:

npm install -g cnpm --registry=https://registry.npmmirror.com
cnpm install vue-router@4

Прямая загрузка / CDN

https://unpkg.com/vue-router@4

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

1. Создайте таблицу маршрутизации

// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'

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

export default createRouter({
  history: createWebHistory(),
  routes
})

2. Смонтируйте в приложении

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

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

3. Место вывода страницы

<router-view></router-view>

4. Навигация

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

5. Динамическая маршрутизация

{ path: '/user/:id', component: User }

При посещении /user/10, $route.params.id === '10'.

6. Ленивая загрузка

const About = () => import('../views/About.vue')

7. Навигационные хуки (аутентификация)

router.beforeEach((to, from, next) => {
  next()
})

8. Перенаправление

{ path: '/old', redirect: '/' }

9、404

{ path: '/:pathMatch(.*)*', component: NotFound }

Простой пример

Vue.js + vue-router позволяют легко реализовать одностраничное приложение.

<router-link>— это компонент, используемый для создания навигационной ссылки для переключения между различным содержимым HTML.toАтрибут `to` — это адрес назначения, т. е. содержимое, которое нужно отобразить.

В следующем примере мы добавляем vue-router, затем настраиваем сопоставления компонентов и маршрутов, а затем сообщаем vue-router, где их отображать. Код выглядит следующим образом:

router-link

Обратите внимание, что мы не использовали обычный тег `<a>`, а вместо этого использовали пользовательский компонент `router-link` для создания ссылок. Это позволяет Vue Router изменять URL без перезагрузки страницы и обрабатывать генерацию и кодирование URL. Позже мы увидим, как воспользоваться этими возможностями.

router-view

`router-view` отобразит компонент, соответствующий URL. Вы можете поместить его куда угодно, чтобы он соответствовал вашему макету.

У нажатых навигационных ссылок будут добавлены стилиclass ="router-link-exact-active router-link-active"。

Пример приложения

Следующий пример охватывает следующие аспекты маршрутизации:Определение、Создание、Монтирование、НавигацияиРендерингпять основных шагов.

1. main.js (входной файл)

2. router/index.js (конфигурация маршрутов)

3. App.vue (корневой компонент)

Когда вы запустите это приложение:

• Нажмите ссылкуHome, URL изменится на/，<router-view>отображается вHome Pageсодержимое компонента.
• Нажмите ссылкуAbout, URL изменится на/about，<router-view>отображается вAbout Usсодержимое компонента.
• Нажмите ссылку404 Demo, URL изменится на/nonexistent，<router-view>отображается в404 Not Foundсодержимое компонента.

Связанные атрибуты <router-link>

Далее давайте подробнее рассмотрим атрибуты <router-link>.

в

Представляет ссылку на целевой маршрут. При клике значение `to` немедленно передаётся в `router.push()`, поэтому это значение может быть строкой или объектом, описывающим целевую локацию.

<!-- 字符串 -->
<router-link to="home">Home</router-link>
<!-- 渲染结果 -->
<a href="home.html">Home</a>

<!-- 使用 v-bind 的 JS 表达式 -->
<router-link v-bind:to="'home'">Home</router-link>

<!-- 不写 v-bind 也可以，就像绑定别的属性一样 -->
<router-link :to="'home'">Home</router-link>

<!-- 同上 -->
<router-link :to="{ path: 'home' }">Home</router-link>

<!-- 命名的路由 -->
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

<!-- 带查询参数，下面的结果为 /register?plan=private -->
<router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>

замена

Если установлен атрибут replace, при клике будет вызван router.replace() вместо router.push(), и после навигации не останется записи в истории.

<router-link :to="{ path: '/abc'}" replace></router-link>

append

Когда установлен атрибут append, путь добавляется в начало текущего (относительного) пути. Например, если мы переходим из /a по относительному пути b, без append путь будет /b, а с append — /a/b.

<router-link :to="{ path: 'relative/path'}" append></router-link>

тег

Иногда вы хотите<router-link>отображаться как определённый тег, например<li>.tagПоэтому мы используем

<router-link to="/foo" tag="li">foo</router-link>
<!-- 渲染结果 -->
<li>foo</li>

active-class

prop, чтобы указать, какой тег. Он по-прежнему прослушивает клики и запускает навигацию.

<style>
   ._active{
      background-color : red;
   }
</style>
<p>
   <router-link v-bind:to = "{ path: '/route1'}" active-class = "_active">Router Link 1</router-link>
   <router-link v-bind:to = "{ path: '/route2'}" tag = "span">Router Link 2</router-link>
</p>

Set the CSS class name used when the link is active. It can be replaced by the following code.classОбратите внимание здесьactive-class="_active"。

exact-active-class

использовать

<p>
   <router-link v-bind:to = "{ path: '/route1'}" exact-active-class = "_active">Router Link 1</router-link>
   <router-link v-bind:to = "{ path: '/route2'}" tag = "span">Router Link 2</router-link>
</p>

event

Настройте класс, который должен быть активным, когда ссылка точно совпадает. Это можно заменить следующим кодом.

<router-link v-bind:to = "{ path: '/route1'}" event = "mouseover">Router Link 1</router-link>

Приведённый выше код устанавливает событие в mouseover, и когда мышь наводится на Router Link 1, HTML-содержимое, к которому выполнен переход, изменится.

Справочник по основному API Vue Router (v4, Vue 3)

I.createRouterПараметры конфигурации

II. Фабрика History

III.RouteRecord(Запись маршрута)

IV. Навигация Router (методы экземпляра Router)

V. Навигационные хуки

VI.<router-link>Пропсы

VII.<router-view>Пропсы

VIII.Route(Текущий объект маршрута)

Этот объект получается черезuseRoute()илиthis.$routeполучить.

IX. Композиционный API

X. Программная навигация (полный пример)