Vue - замечательный фреймворк на JavaScript. Его автором является Эван Ю. Фреймворк используется для создания обособленных приложений для веб-страниц и компонентов, обладающих гибкостью. Использование Vue считается достаточно важным и полезным навыком в разработке клиентских частей веб-приложений.
В Vue можно работать с множеством функций, благодаря которым удобнее пользоваться многоразовыми веб-компонентами. Роутинг - один из таких методов. Пользователь может переходить на разные веб-страницы, при этом ему необязательно обновлять страницу. Именно поэтому навигация в веб-приложениях становится легче и приятнее.
Итак, в этой статье я объясню, как работает Vue Routing путем создания шаблона Vue в качестве примера.
Начнем
Итак, давайте начнем наш проект маршрутизатора Vue JS с установки и создания нового проекта. Нам нужно установить Node JS. Мы будем использовать vue-cli для создания нового проекта. Выполните следующие действия.
Введите в терминал такой код и запустите:
vue init webpack vue-router
//
cd vue-router
//
npm run dev
Перейдите в браузере: http://localhost:8080.
Откройте приложение в текстовом редакторе. Из папки компонентов откройте файл «HellowWorld.vue» и следуйте таким шагам:
1) Смените название файла на «home.vue». Уберите весь код и замените его на это:
<template>
<div class="home">
<h1>Home</h1>
</div>
</template>
<script>
export default {
name: 'home',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
2) Откройте index.js из папки роутера и замените HelloWorld на home:
import Vue from 'vue'
import Router from 'vue-router'
import home from '@/components/home'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'home',
component: home
}
]
})
Файл App.vue теперь должен выглядеть так:
<template>
<div id="app">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
#app {
}
</style>
А теперь давайте займемся написанием нашего кода!
Нам нужно будет использовать шаблон Bootswatch. Вы можете выбирать любой шаблон, который вам понравится. Я выбрал Cosmo. Нажмите Ctrl+U, чтобы увидеть исходный код, и скопируйте Navbar (нам нужен только он). Поместите данный фрагмент кода в компонент App.vue.
Вот что получится:
Далее нужно прописать создание 3 других компонентов: Blog, Contact, Services.
В папке компонентов следует добавить новый файл, назвав его Blog.vue. Добавьте в него такой код:
<template>
<div class="blog">
<h1>{{blog}}</h1>
</div>
</template>
<script>
export default{
name:'blog',
data (){
return{
title:'Blog'
}
}
}
</script>
<style scoped>
</style>
Если вы хотите повторить это действие для компонентов Service и Contact, в вашей папке компонентов должны быть следующие файлы:
- home.vue;
- blog.vue;
- services.vue;
- contact.vue.
Настройка роутеров Vue
Теперь, когда мы создали 4 компонента, нужно получить возможность осуществлять перемещение между компонентами. Для этого необходимо произвести настройку роутеров.
Как же нам научиться перемещаться к компонентам с использованием роутеров?
Мы должны изучить правила Vue Routing для начала. Нам нужно сделать несколько изменений в папке роутеров. Мы будем работать с файлом index.js.
Вам нужно будет выполнить следующие шаги:
1) Для начала произведите импорт всех своих компонентов в файл index.js. Вставьте все компоненты с использованием метода import.
import home from '@/components/home'
import blog from '@/components/blog'
import services from '@/components/services'
import contact from '@/components/contact'
2) Далее импортируйте Vue и модуль роутера из модуля vue-router:
import Vue from 'vue'
import Router from 'vue-router'
// use router
Vue.use(Router)
Если вы устанавливали Vue с vue-cli, в вашем случае модуль vue-router уже будет импортирован.
3) Наконец, внутри папки Router нужно произвести настройку маршрутизаторов, чтобы заставить их работать. Метод router использует массив объектов, который, в свою очередь, использует свойства, относящиеся ко всем компонентам по отдельности:
export default new Router({
routes: [
{
path: '/',
name: 'home',
component: home
},
{
path: '/blog',
name: 'blog',
component: blog
},
{
path: '/services',
name: 'services',
component: services
},
{
path: '/contact',
name: 'contact',
component: contact
}
]
})
- path: путь компонента;
- name: имя компонента;
- component: описание компонента.
Чтобы какой-либо компонент стал компонентом, который используется по умолчанию добавьте слеш (/) в свойство path:
path: '/'
В нашем примере страницей по умолчанию является home. Теперь при открытии проекта в браузере первой страницей, которая будет появляться, будет home.
{
path: '/',
name: 'home',
component: home
}
Vue-router имеет более продвинутые параметры и методы, но мы не собираемся погружаться в этот раздел на данном этапе.
Вот набор свойств и методов, которые применимы в случае с Vue-router:
Вложенные роутеры;
Описание с именем;
Перенаправление и дополнительные имена;
Указатель навигации;
Копия роутера.
Теперь вы можете просматривать любые компоненты, вводя только имя!
Router-link
Теперь мы проведем настройку навигации через Navbar. Его мы уже создавали при помощи элемента router-link.
Нам нужно будет заменить элемент </a> на <router-link></router-link> следующим образом:
<li class="nav-item">
<router-link class="nav-link" to="/blog">Blog</router-link>
</li>
<li class="nav-item">
<router-link class="nav-link" to="/services">Services</router-link>
</li>
<li class="nav-item">
<router-link class="nav-link" to="/contact">contact</router-link>
</li>
Router-link берет атрибут to='path', который принимает путь к компоненту за значение.
Router-view
В файле App.vue вы найдете тег <router-view>. По сути это описание, в котором проходит рендер компонентов. Это как главный div, в котором содержатся все компоненты. Он будет возвращать компоненты, которые будут подходить заданному текущему маршруту. Мы обсудим router-view в следующей части, где рассмотрим анимированный переход.
Применение параметров внутри роутеров
На этом этапе мы будем применять параметрические элементы для перехода к определенным компонентам. Параметры делают Vue Routing динамическим.
Для работы с параметрами нужно создать список продуктов и массив данных. При нажатии на ссылку какого-либо продукта вы перейдете к деталям страницы через параметр.
В этой ситуации мы не будем применять БД или API для получения необходимых данных, касающихся продуктов. Из-за этого нам нужно создать массив продуктов, который будет играть роль БД.
Находясь в компоненте home.vue, разместите указанный массив в методе data() таким образом:
export default {
name: 'home',
data () {
return {
title: 'Home',
products: [
{
productTitle: "ABCN",
image: require('../assets/images/product1.png'),
productId: 1
},
{
productTitle: "KARMA",
image: require('../assets/images/product2.png'),
productId: 2
},
{
productTitle: "Tino",
image: require('../assets/images/product3.png'),
productId: 3
},
{
productTitle: "EFG",
image: require('../assets/images/product4.png'),
productId: 4
},
{
productTitle: "MLI",
image: require('../assets/images/product5.png'),
productId: 5
},
{
productTitle: "Banans",
image: require('../assets/images/product6.png'),
productId: 6
}
]
}
}
}
Затем проведите выборку и цикл в массиве продуктов с помощью директивы v-for.
<div class="row">
<div class="col-md-4 col-lg4" v-for="(data,index) in products" :key="index">
<img :src="data.image" class="img-fluid">
<h3>{{data.productTitle}}</h3>
</div>
</div>
Результат:
Чтобы перейти к компоненту деталей, сначала нужно добавить событие клика:
<h3 @click="goTodetail()" >{{data.productTitle}}</h3>
Затем - методы:
methods: {
goTodetail() {
this.$router.push({name:'details'})
}
}
Если вы нажмете на заголовок, то он будет не определен, так как мы еще не создали компонент деталей. Давайте создадим его:
details.vue
<template>
<div class="details">
<div class="container">
<h1 class="text-primary text-center">{{title}}</h1>
</div>
</div>
</template>
<script>
export default{
name: 'details',
data(){
return{
title: "details"
}
}
}
</script>
Теперь мы можем переходить, не получая ошибки!
Как можно перейти на страницу деталей и получить подходящие данные, если у нас нет базы данных?
Мы используем тот же массив продуктов и в компоненте деталей. Таким образом мы сможем обрабатывать идентификатор, который исходит из URL-адреса:
products: [
{
productTitle: "ABCN",
image: require('../assets/images/product1.png'),
productId: 1
},
{
productTitle: "KARMA",
image: require('../assets/images/product2.png'),
productId: 2
},
{
productTitle: "Tino",
image: require('../assets/images/product3.png'),
productId: 3
},
{
productTitle: "EFG",
image: require('../assets/images/product4.png'),
productId: 4
},
{
productTitle: "MLI",
image: require('../assets/images/product5.png'),
productId: 5
},
{
productTitle: "Banans",
image: require('../assets/images/product6.png'),
productId: 6
}
]
Для начала нужно установить идентификатор в качестве параметра в методе goToDetail():
<h3 @click="goTodetail(data.productId)" >{{data.productTitle}}</h3>
Затем нужно добавить второй параметр в метод роутера.
Метод $router имеет 2 параметра: первый - имя (name) компонента, в который мы хотим перейти; второй - идентификатор (id) или любой другой параметр.
this.$router.push({name:'details',params:{Pid:proId}})
Добавьте Pid как параметр в index.js, внутри папки router:
{
path: '/details/:Pid',
name: 'details',
component: details
}
home.vue
methods: {
goTodetail(prodId) {
this.$router.push({name:'details',params:{Pid:proId}})
}
}
Чтобы получить соответствующий параметр, используйте этот код:
this.$route.params.Pid
details.vue
<h2>the product id is :{{this.$route.params.Pid}}</h2>
Затем проведите цикл через массив продуктов в details.vue и проверьте объект, который соответствует параметру Pid. Верните его данные:
<div class="col-md-12" v-for="(product,index) in products" :key="index">
<div v-if="proId == product.productId">
<h1>{{product.productTitle}}</h1>
<img :src="product.image" class="img-fluid">
</div>
</div>
export default {
name: 'details',
data(){
return{
proId:this.$route.params.Pid,
title:"details"
}
}
}
Теперь вы видите, что при клике на какой-либо продукт мы переходим на страницу этого продукта!
Компонент detail.vue:
<template>
<div class="details">
<div class="container">
<div class="row">
<div class="col-md-12" v-for="(product,index) in products" :key="index">
<div v-if="proId == product.productId">
<h1>{{product.productTitle}}</h1>
<img :src="product.image" class="img-fluid">
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default{
name: 'details',
data(){
return{
proId: this.$route.params.Pid,
title: "details",
products:[
{
productTitle: "ABCN",
image: require('../assets/images/product1.png'),
productId: 1
},
{
productTitle: "KARMA",
image: require('../assets/images/product2.png'),
productId: 2
},
{
productTitle: "Tino",
image: require('../assets/images/product3.png'),
productId: 3
},
{
productTitle: "EFG",
image: require('../assets/images/product4.png'),
productId: 4
},
{
productTitle: "MLI",
image: require('../assets/images/product5.png'),
productId: 5
},
{
productTitle: "Banans",
image: require('../assets/images/product6.png'),
productId: 6
}
]
}
}
}
</script>
Переходы
В этой части мы добавим анимированный переход между компонентами. Тогда навигация станет потрясающей, получится более удобный пользовательский интерфейс.
Чтобы сделать анимированный переход, поместите <router-view> внутри тега <transition/> и присвойте ему имя класса.
App.vue
<transition name="moveInUp">
<router-view/>
</transition>
Чтобы анимировать переход между компонентами, когда он входит в «вид», добавьте enter-active к имени, которое присвоено тегу перехода. Затем добавьте leave-active и присвойте ему CSS-свойства перехода, как здесь:
.moveInUp-enter-active{
opacity: 0;
transition: opacity 1s ease-in;
}
Использование анимации CSS3
Теперь мы создадим анимацию с помощью @keyframes в CSS3.
Когда компонент станет виден, добавим эффект затухания.
.moveInUp-enter-active{
animation: fadeIn 1s ease-in;
}
@keyframes fadeIn{
0%{
opacity: 0;
}
50%{
opacity: 0.5;
}
100%{
opacity: 1;
}
}
Добавим еще один эффект затухания. На этот раз он будет срабатывать при закрытии компонента.
Теперь мы сделаем так, чтобы компонент поднимался выше, когда он закрывается.
.moveInUp-leave-active{
animation: moveInUp .3s ease-in;
}
@keyframes moveInUp{
0%{
transform: translateY(0);
}
100%{
transform: translateY(-400px);
}
}
Теперь вы можете создавать собственные анимации и переходы для своих компонентов.
Вот и все - мы закончили!
Исходный код можно скачать по ссылке.
Заключение
Когда дело касается навигации, Vue Routing - именно то, что может сделать ваше приложение отличным и удобным. Благодаря нему кажется, что в веб-приложении всего одна страница. У пользователей от этого возникают более приятные впечатления.