VueJS. Создаем одностраничное приложение на Vue 2 (часть 2)

Опубликовано: 15 мая 2017 г.
  • SPA
  • Скачать
В этом уроке вы будете использовать существующий проект, сделанный в SPA на Vue 2. Часть 1, и добавите навигацию, а также маршрут для передачи параметров.

Вот, что у нас должно получиться:

одностраничное приложение на Vue 2

Передача параметров маршрутам

В 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>

Взгляните на домашнюю страницу, она должна выглядеть так:

одностраничное приложение на Vue 2

Обратите внимание, что «param link» находится сразу после ссылки «about». Нажмите на ссылку param, и вы увидите следующее:

одностраничное приложение на Vue 2

Откройте инструмент разработчика в консоли. Если вы нажмете на кнопку, вы, вероятно, столкнетесь с ошибкой: [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» и тогда вы должны будете увидеть такую страницу:

SPA на Vue 2

Вот и все! Вы только что создали свой первый маршрут к компоненту. Как видите, ничего сложного.

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

Сторожевые хуки (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 была использован для проверки аутентификации. Однако можно сделать по другому, например, запрашивать аутентификацию пользователя через сервер.

Заключение

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

Популярные статьи
2D игра на Unity. Подробное руководство. Часть 1
  • unity
2D игра на Unity. Подробное руководство. Часть 1
Адаптивный слайдер без Javascript на CSS3
  • слайдер
Адаптивный слайдер без Javascript на CSS3
Работа с Unity в 2D
  • unity
Работа с Unity в 2D
2D игра на Unity. Подробное руководство. Часть 3
  • unity
2D игра на Unity. Подробное руководство. Часть 3
2D игра на Unity. Подробное руководство. Часть 4
  • unity
2D игра на Unity. Подробное руководство. Часть 4
2D игра на Unity. Подробное руководство. Часть 5
  • unity
2D игра на Unity. Подробное руководство. Часть 5
2D игра на Unity. Подробное руководство. Часть 6
  • unity
2D игра на Unity. Подробное руководство. Часть 6
Учебник по новому GUI в Unity. Часть 2.
  • unity
Учебник по новому GUI в Unity. Часть 2.
Учебник по новому GUI в Unity. Часть 1.
  • unity
Учебник по новому GUI в Unity. Часть 1.

HTML LESS LESS React
Онлайн журнал для профессиональных веб-дизайнеров и программистов
БлогПлагиныГрафикаИнструменты
CanvasSPAcssjavascriptjqueryphotoshopphpunitywordpress{"fieldValue":[{"image_preview":"","image_demo":"","example":""}],"fieldSettings":{"autoincrement":1}}{"fieldValue":[{"image_preview":"https://cdn-images-1.medium.com/max/800/1*OIBUnA4NokXK14IMR5csTw.jpeg","image_demo":"https://cdn-images-1.medium.com/max/800/1*OIBUnA4NokXK14IMR5csTw.jpeg","example":""}],"fieldSettings":{"autoincrement":1}}Аудио/Видеоаккордеонанимациябазы данныхбраузерные игрыверсткагалереяграфикакартыкнопкименюпараллаксподсказкипопаппрелоадерслайдертаймерформычекбоксыэлементы интерфейса
© 2009-2017 WebSketches.ru