В этом уроке вы будете использовать существующий проект, сделанный в SPA на Vue 2. Часть 1, и добавите навигацию, а также маршрут для передачи параметров.
Вот, что у нас должно получиться:
Передача параметров маршрутам
В Vue параметры могут быть переданы маршруту путем помещения атрибута перед именем параметра. Это несколько похоже на механизм маршрутизации в Laravel. Если вы знакомы с Laravel, то знаете, что аннотация {} используется для указания маршрута. Взгляните на пример ниже, взятый из документации по Vue-маршрутизатору:
{ path: '/user/:id', component: User }
Из примера можно сказать, что маршрут будет таким: /users/2 (или любое целое вместо 2). Независимо от содержания, которое имеет значение, оно будет называться “id”, к которому можно будет получить доступ, используя$route.params.id в компоненте User. Давай начнем!
Создание параметров маршрута
Создайте в папке src\components новый компонент по имени Param.vue и скопируйте в него следующее:
//src\components\Param.vue
export default {
name: 'Param',
data () {
return {
UserInput :''
}
},
methods:{
GoToRoute : function(){
this.$router.push({ name: 'Paramdetails', params: { id: this.UserInput }})
}
}
}
В приведенном выше фрагменте кода компонент Param является шаблоном, содержащим текстовое поле и кнопку.
Теперь перейдите к файлу main.js и импортируйте компонент Param, а также создать путь, который обрабатывает маршрут. Для этого над блоком кода с константой routes добавьте следующий импорт:
//main.js
import Param from './components/Param
После выполнения вышеуказанного и импорта компонента Param, замените блок маршрутов на следующий:
//main.js
//определяем маршруты
const routes = [
//Маршрут для главной веб-страницы
{ path: '/', component: Hello },
//Маршрут для страницы с информацией
{ path: '/about', component: About },
//Маршрут для параметров страницы
{ path: '/param', component: Param }
]
Обратите внимание, что в приведенном выше фрагменте кода единственное различие, которое произошло, - это добавление маршрута param. Однако нужно сделать еще кое-что, чтобы маршрут можно было реализовать с помощью ссылок «about» и «home».
Используйте тег маршрутизатора link в нашем файле App.vue и добавьте следующую строку кода сразу после ссылки «about»:
<!--src\components\App.vue-->
<router-link v-bind:to="'/param'">Param Link</router-link>
Взгляните на домашнюю страницу, она должна выглядеть так:
Обратите внимание, что «param link» находится сразу после ссылки «about». Нажмите на ссылку param, и вы увидите следующее:
Откройте инструмент разработчика в консоли. Если вы нажмете на кнопку, вы, вероятно, столкнетесь с ошибкой: [vue-router] Route with name 'Paramdetails' does not exist (Маршрут с именем 'Paramdetails' не существует)
Это связано с тем, что в приведенном выше коде метод, прикрепленный к кнопке, вызывает следующее:
this.$router.push({
name: 'Paramdetails',
params: { id: this.UserInput }
})
и это не определяет ни одного маршрута paramdetails, который принимает параметры.
Следующим шагом будет создание компонента, который обрабатывает маршрут. Создайте в src/components новый файл paramedetails.vue и вставьте в него следующее содержимое:
<template>
<p>Значение переданного мне параметра: {{$route.params.id}}</p>
</template>
<script>
export default
{
name: 'paramdetails'
}
</script>
Этот код создает компонент, содержащий элемент p и выводящий переданный ему параметр. Чтобы этот код заработал, добавьте наш новый компонент в маршруты.
Немного выше блока кода с константой routes добавьте следующий импорт:
//main.js
//Импортировать компонент paramdetails
import paramdetails from './components/paramdetails'
После выполнения вышеизложенного и импорта компонента paramdetails замените блок с маршрутами этим:
//main.js
//определяем маршруты
const routes = [
//Маршрут для домашней страницы
{ path: '/', component: Hello },
//Маршрут для страницы about
{ path: '/about', component: About },
//Маршрут для страницы param
{ path: '/param', component: Param },
//Маршрут для передачи paramdetails в params
{ path: '/Paramdetails/:id', component: paramdetails, name: 'Paramdetails' }
]
Обратите внимание, что последний маршрут имеет две новые настройки, которые не были видны на других маршрутах. Первой настройкой является : id, который является плейсхолдером для передаваемых маршрутов. Вторая продставляет собой объект name в объекте route.
Для понимания свойства name в объекте, имейте в виду, что как и любой маршрутизатор, Vue содержит концепт именования маршрутов. Вместо запоминания целых ссылок новых маршрутов, он использует более короткий и простой способ называния маршрутов именами. Также обратите внимание на метод GoToRoute в компоненте param в нем вы увидите, что объект маршрутизации используется, и это определяет имена маршрутов.
Теперь нажмите на ссылку «param link» и введите в текстовое поле какое-нибудь число, например 52. Затем нажмите на кнопку «go to route» и тогда вы должны будете увидеть такую страницу:
Вот и все! Вы только что создали свой первый маршрут к компоненту. Как видите, ничего сложного.
Использование сторожевых хуков
Сторожевые хуки (route guards) - это своеобразные стражи, которые следят за изменениями в маршрутах и выполняют определенные действия либо до перехода одного маршрута в другой, либо после. Сторожевые хуки могут использоваться для запрета посещения определенных страниц неавторизованными пользователями. Маршрутизатор Vue имеет общие хуки, а также отдельные хуки для маршрутов и для компонентов.
Существует два основных глобальных маршрута, создаваемых маршрутизатором Vue, а именно: beforeEach и afterEach. Как можно догадаться из имени, “beforeEach” выполняется до перехода маршрута, в отличие от “afterEach”.
Отдельные хуки для маршрутов можно добавлять к объектам маршрутов какого-то отдельно взятого маршрута как в функциях обратного вызова, в то время как хуки компонентов определяются компонентами, которые обрабатывают эти маршруты. В этом уроке придерживайтесь глобального маршрута «beforeEach».
Откройте файл main.js и сразу же после константы routes добавьте следующее:
//main.js
//Место сторожевого хука
router.beforeEach((to, from, next) => {
//Проверяет, переходит ли пользователь к параметру
if(to.path == '/param'){
//Проверяет, создан ли уже пользователь
if(localStorage.getItem('user')==undefined){
//Сообщение для имени пользователя
var user = prompt('Введите имя пользователя');
//Сообщение для пароля
var pass = prompt('Введите пароль');
//Проверим, соответствует ли имя пользователя и пароль
//нашим предварительным настройкам
if (user == 'username' && pass == 'password'){
//Создаем пользователя
localStorage.setItem('user', user);
//Перейти по маршруту
next();
}else{
//Сообщаем, что имя пользователя и пароль неверны
alert('Неверное имя пользователя и пароль');
//возвращает, не меняя маршрут
return;
}
}
}
next()
})
Вызываемая функция “router.beforeEach” принимает три аргумента, которые передаются ей маршрутизатором Vue. Параметр to относится к объекту пути, к которому необходимо получить доступ, в то время как параметр from относится к объекту предыдущего пути.
Проверьте, что “to.path” равно /param (адрес защищаемого маршрута). Если путь соответствует тому, который должен быть защищен, проверьте данные «localStorage», содержащие данные пользователя, чтобы узнать, определены ли они. Если пользователь не определен, запросите имя пользователя и пароль и создайте данные «localStorage». Если пользователь авторизован, функция продолжает работу и пользователь переходит на нужную страницу.
Следующая функция должна вызываться так, чтобы маршрутизатор мог обработать пользователя на следующей странице. Если функция не вызывается, может появиться пустой экран.
В этом уроке строчка с username и password была использован для проверки аутентификации. Однако можно сделать по другому, например, запрашивать аутентификацию пользователя через сервер.
Заключение
Теперь вы знаете как передавать параметры маршрутам, что такое именованные маршруты и как их создавать.