Руководство по Vue Router

Введение

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

Маршрутизация — это процесс, посредством которого пользователь переходит на разные страницы веб-сайта. Vue.js — это платформа JavaScript, используемая для создания одностраничных приложений. Это означает, что это приложение загружается с сервера в браузер только один раз, и браузеру не требуется перезагрузка при маршрутизации; вместо этого он просто запрашивает эти страницы, и они загружаются.

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

Первые шаги

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

Настройка Vue Router в существующем проекте

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

! npm install vue-router@4

После установки перейдите к src папку и создайте папку с именем router, за которым следует файл с именем index.js в router папка, которая будет служить файлом конфигурации нашего маршрутизатора. Наш src каталог теперь будет выглядеть так:

В index.js файл, давайте вставим приведенный ниже код, который является кодом конфигурации маршрутизатора:

import { createRouter, createWebHashHistory } from 'vue-router'
import HomePage from '../views/HomePage.vue' const routes = [ { path: '/', name: 'home', component: HomePage },
] const router = createRouter({ history: createWebHashHistory(), routes
})
export default router

У нас есть routes массив, содержащий один объект (это может быть несколько объектов, каждый из которых представляет один маршрут). На данный момент мы создали только тот, который будет перенаправлять на компонент домашней страницы.

Каждый из них routes объекты обычно состоят из path, который представляет собой URL-путь относительно корня сайта, name, который служит идентификатором, а component, который мы импортировали вверху страницы.

Помимо массива маршрутов, мы настраиваем экземпляр маршрутизатора внизу, создав createRouter() функция и переход в history ключевые ценности и routes массив, а затем экспортируем router экземпляр для использования в нашем приложении.

Чтобы использовать эту конфигурацию маршрутизатора в нашем приложении, откройте main.js подать в src папка, import router from "./router", а затем добавьте .use(router) между createApp(App) и .mount('#app') так же, как показано ниже:

import router from './router' createApp(App).use(router).mount('#app')

Эта vue-router был глобально настроен в нашем приложении, и следующим шагом будет его использование в нашем приложении. Это легко сделать, включив <router-view /> в App.js тег шаблона, который отображает только соответствующий маршрут:

<!--App.vue -->
<template>
<!-- Any code placed here is going to be fixed -->
<!-- This will only show the page that matches the selected route --> <router-view /> <!-- Any code placed here is going to be fixed -->
</template> <script> export default { name: 'App', }
</script>

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

Маршруты обычно создаются в router/index.js массив маршрутов файла, и эти маршруты подключаются к компонентам. Рекомендуется создать папку представлений, в которой будут храниться все просмотры страниц. Например:

Теперь мы знаем, как настраивать маршруты вручную.

Установите Vue Router с помощью Vue CLI

Если мы собираемся создать новый проект и считаем, что воспользуемся vue-router, это проще сделать при создании проекта.

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

Прочтите и узнайте больше о создании проекта Vue.js на нашем сайте. Руководство по Vue CLI!

Ленивая загрузка маршрутов с помощью Vue Router

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

Обычно это делается в файле конфигурации маршрутизатора путем удаления import оператор вверху и заменив его оператором динамического импорта в опции компонента нашего маршрута:

import { createRouter, createWebHashHistory } from 'vue-router';
const routes = [ { path: '/', name: 'home', component: () => import(/* webpackChunkName: "home" */ '../views/HomePage.vue'), }, { path: '/about', name: 'about', component: () => import(/* webpackChunkName: "about" */ '../views/AboutPage.vue'), },
];
const router = createRouter({ history: createWebHashHistory(), routes,
});
export default router;

Навигация между маршрутами с помощью

До сих пор мы могли создавать маршруты, но как нам перемещаться в нашем приложении? Мы используем <router-link> тег вместо <a> элемент в HTML для управления маршрутизацией.

Например, если мы хотим создать панель навигации в верхней части нашего приложения, мы можем сделать это в App.js файл над <router-view/> тег, чтобы он отображался на всех маршрутах:

<nav> <router-link to="/">Home</router-link> | <router-link to="/about">About</router-link>
</nav>

Маршрутизатор-ссылка принимает to='path' атрибут, который направляет пользователя к пути к компоненту, заданному при настройке маршрута. Это работает как href='path``' атрибут в HTML.

Использование именованных маршрутов

Использование именованных маршрутов позволяет нам передавать name ключ, который имеет доступ к name свойство, которое мы установили при настройке маршрутов вместо использования пути, привязав данные следующим образом:

<router-link :to="{ name: 'About' }">About</router-link>

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

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

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

У нас будет две страницы: одна для демонстрации фруктов в списке и одна для отображения сведений о каждом фрукте, которая представляет собой страницу «чертежа», заполняемую подробностями о фруктах. Мы создадим страницы в папке Vue, а затем добавим маршруты в папку. routes массив:

import FruitsPage from '../views/FruitsPage.vue';
import FruitDetails from '../views/FruitDetails.vue'; const routes = [ { path: '/fruits', name: 'Fruits', component: FruitsPage, }, { path: '/fruits/:id', name: 'FruitDetails', component: FruitDetails, },
];

Мы заметим, что для FruitDetails страницу мы добавили динамический id свойство, поэтому оно получает id параметр и использует его для запроса конкретных данных, отображаемых на этой странице, с помощью $route.params в нашем шаблоне, что делает маршрут динамическим.

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

<!-- FruitsPage.vue --> <template> <h1>Fruits page</h1> <div :key="fruit.id" v-for="fruit in fruits"> // dynamic linking by attaching the id as params <router-link :to="{ name: 'FruitDetails', params: { id: fruit.id } }"> <h3>{{ fruit.name }}</h3> </router-link> </div>
</template> <script> export default { data() { return { fruits: [ { id: 1, name: 'Apple', description: "Apples are an incredibly nutritious fruit.", }, { id: 2, name: 'Mango', description: 'A mango is an edible stone fruit produced by the tropical.', }, { id: 3, name: 'Banana', description: 'A banana is an elongated, edible fruit of the genus Musa.', }, ], }; }, };
</script>

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

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

До сих пор мы видели, как динамически передавать параметры на определенную страницу, давайте теперь посмотрим, как мы можем получить доступ к этому параметру в нашей FruitDetails страница. Есть два способа доступа к параметрам в Vue — через $route.params или используя реквизит:

. $route.params

Параметры доступны напрямую через $route.params:

<template> <h1>Fruit Details</h1> <p>This is fruit with the id of {{ $route.params.id }}</p>
</template>

Или мы можем получить к нему доступ в нашем data() метод с использованием this:

<template> <h1>Fruit Details</h1> <p>This is fruit with the id of {{ id }}</p>
</template> <script> export default { data() { return { id: this.$route.params.id, }; }, };
</script>

Использование реквизитов Vue

Еще один простой способ динамического доступа к данным через маршруты — использование реквизита. Сначала нам нужно установить props в true в объекте конфигурации маршрутов:

{ path: '/fruits/:id', name: 'FruitDetails', component: FruitDetails, props: true,
},

Таким образом, все, что нам нужно сделать дальше, это добавить props вариант для script тег, а затем использовать реквизиты в нашем template тег:

<template> <h1>Fruit Details</h1> <p>This is fruit with the id of {{ id }}</p>
</template> <script> export default { props: ['id'], };
</script>

Ошибки 404 — маршрут не найден

В случае, если пользователь переходит по несуществующему маршруту, Vue загрузит страницу, но без каких-либо компонентов, создав пустую страницу. В этом случае лучше всего отобразить страницу 404 с, возможно, кнопкой, ведущей на домашнюю страницу или туда, куда, по нашему мнению, они хотели бы перейти.

Это легко решить, создав компонент для нашей страницы 404, а затем добавив маршрут 404 в массив маршрутов файла конфигурации маршрутизатора, но на этот раз мы будем использовать регулярное выражение для перехвата всех маршрутов, которые не были объявлены ранее:

{ path: '/:catchAll(.*)', name: 'ErrorPage', component: ErrorPage,
}

Ассоциация :catchAll это динамический сегмент, который получает регулярное выражение (.*) в котором Vue Router проверяет, определен ли маршрут, по которому переходит пользователь, в файле конфигурации нашего маршрутизатора. Если таких маршрутов не существует, пользователь направляется к компоненту, которым в нашем случае является ErrorPage компонент:

<template> <h2>404 Page</h2> <p>This is a 404 page</p> <p>Visit home page <router-link to="/">here</router-link></p>
</template>

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

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

{ path: '/fruits', name: 'Fruits', component: FruitsPage,
},
{ path: '/all-frults', redirect: '/fruits',
},

Весь приведенный выше код заключается в том, что если пользователь посещает, путь /all-fruits, это перенаправит их на /fruits маршрута.

Программная навигация

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

История маршрутизатора

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

Это позволяет нам просматривать историю браузера на основе условия, такого как нажатие кнопки:

<template> <h1>Fruit Details</h1> <p>This is fruit with the id of {{ id }}</p> <button @click="goBack">Go Back</button>
</template> <script> export default { props: ['id'], methods:{ goBack(){ this.$router.go(-1) } } };
</script>

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

Push

push() обычно используется после того, как действие произошло, и добавляет новую запись в стек истории. Например, если пользователь успешно входит в систему, мы хотели бы программно перейти на страницу панели мониторинга. Это достигается путем включения метода push рядом с именем маршрута:

this.$router.push({ name: 'Dashboard' });

Заключение

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

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

• Коинсмарт. Лучшая в Европе биржа биткойнов и криптовалют.
• Платоблокчейн. Интеллект метавселенной Web3. Расширение знаний. БЕСПЛАТНЫЙ ДОСТУП.
• КриптоХок. Альткоин Радар. Бесплатная пробная версия.
• Источник: https://stackabuse.com/guide-to-vue-router/