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

Маршрутизация с помощью Vue Router 4: полное руководство

Vuejs 3 поставляется с некоторыми новыми и удивительными функциями. Некоторые из этих функций включают, среди прочего, оптимизацию, улучшенную поддержку TypeScript, глобальное монтирование, переход на новый составной API.

В этой статье мы собираемся изучить vue-router 4, официальную и новейшую библиотеку для обработки маршрутизации в Vue.js. Маршрутизация позволяет нам перемещаться между приложениями туда и обратно. Мы настроим маршрутизацию в приложении Vue.js и рассмотрим некоторые полезные возможности, встроенные в vue-router 4.

В этой статье мы предполагаем, что у вас есть каркас приложения Vue.js 3. Ознакомьтесь с этим руководством, если вы хотите создать новое приложение Vue.js.

Монтаж

В зависимости от предпочитаемого менеджера пакетов вы можете установить vue-router 4, выполнив следующую команду на своем терминале.

Использование NPM

npm install vue-router@4

Использование пряжи

yarn add vue-router@4

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

Настройка маршрутов

В корневом каталоге вашего файла создайте папку и назовите ее router. Внутри папки создайте файл с именем index.ts. Этот файл будет содержать все маршруты/пути нашего приложения с необходимыми конфигурациями.

В приведенном выше фрагменте кода мы импортировали createWebHistory и createRouter из маршрутизатора Vue. createWebHistory позволяет нам реализовывать различные режимы веб-маршрутизации. Мы можем использовать режимы Hash, HTML 5 и Memory. В нашей конфигурации здесь мы используем режим HTML 5, установив `history: createWebHistory()`

В режиме хеширования используется (#) перед фактическим URL-адресом, что может привести к тому, что ваш URL-адрес будет выглядеть немного неаккуратно, а также негативно повлияет на SEO. Если вы хотите попробовать режим хеширования, импортируйте createWebHashHistory из vue-router и установите `history: createWebHashHistory()`.

То же самое относится к режиму памяти, импортируйте createMemoryHistory из vue-router и установите `history: createMemoryHistory()`.

createRouter позволит нам создать экземпляр нашего маршрутизатора и позволит нам передавать маршруты, которые мы указали выше.

Найдите файл app.vue и укажите router-view где-нибудь в шаблоне. В этом разделе будут отображены все совпадающие маршруты.

Установка маршрутизатора

Теперь мы настроили нашу простую маршрутизацию, но пока не можем получить доступ к нужным путям. Нам нужно смонтировать весь экземпляр маршрутизатора в файл записи приложения, чтобы наше приложение могло знать о предоставленной нами маршрутизации.

Откройте файл main.js или main.ts, если во время установки вы выбрали TypeScript и у вас есть следующее.

Здесь мы импортируем файл конфигурации маршрутизатора, и все приложение регистрирует экземпляр маршрутизатора. Теперь вся наша конфигурация маршрутизации доступна во всем приложении, и мы можем перемещаться по /home /about и /contact.

Если вы попытаетесь перейти к несконфигурированному маршруту, такому как /users , Vuejs выдаст ошибку. Позже в этой статье мы увидим, как обрабатывать и перехватывать маршруты, не настроенные в нашем приложении.

Чтобы связать настроенные нами маршруты, вам нужно использовать router-link, как показано ниже. Использование этого полезно, так как он не обновляет страницу, в отличие от тега a, а также упрощает работу vue-router с функциональностью.

// go to /contact page
<router-link to="/contact">Contact</router-link>
// go to /about page
<router-link to="/about">About</router-link>

перенаправляет

Мы можем легко обрабатывать перенаправления с помощью vue-router. Предположим, что вы хотите, чтобы пользователи, посещающие путь /home, перенаправлялись на /, мы можем справиться с этим, как показано ниже.

Теперь, когда пользователь перейдет к /home, он будет перенаправлен на маршрут /. Перенаправления также могут быть полезны, когда вы хотите разрешить доступ к определенным маршрутам только определенным пользователям.

Ленивые маршруты загрузки

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

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

Вложенные маршруты

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

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

Метаполя маршрута

Метаполя маршрута дают нам возможность добавлять информацию о маршрутах, которой мы можем манипулировать позже. Мы можем указать маршруты, которые требуют аутентификации для доступа или другой соответствующей информации, которую мы можем захотеть.

Здесь мы предоставили свойству поля /meta некоторую информацию. На экземпляре маршрутизатора мы можем проверить, аутентифицирован ли пользователь, мы предоставляем доступ к этому конкретному пути. Мы также можем предоставить такую информацию, как /title .

Не найденные маршруты

Мы также можем поймать некоторые маршруты, которые не настроены в нашей маршрутизации. Мы можем вернуть специальный компонент 404 Not Found. Чтобы поймать ненастроенные маршруты, мы используем /catchall * .

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

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

Вы можете настроить маршруты для динамической маршрутизации, как показано ниже. Вам нужно только добавить двоеточие после пути и указать имя параметра. В данном случае у нас есть параметр cid.

Доступ к параметрам маршрута

В шаблоне компонента вы можете получить доступ к параметру cid, как показано ниже 👇.

<template>{{ $route.param.cid }}</template>

Перед тем, как ты уйдешь

Я надеюсь, что вы нашли эту статью полезной в том, как обрабатывать маршрутизацию с помощью vue-router 4 в приложении Vuejs 3.

Время от времени я отправляю эксклюзивные электронные письма с советами, статьями, приложениями, книгами и идеями, которые я считаю полезными и связанными с техническим письмом.

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