От автора: Vue.js — отличная JavaScript платформа, созданная Эваном Ю. Она используется для разработки отдельных приложений для веб-страниц и гибких компонентов, это также один из самых необходимых навыков при разработке Front End.
Vue.js предоставляет множество функций, которые позволяют создавать повторно используемые веб-компоненты. Маршрутизация — одна из таких функций. Она позволяет пользователю переключаться между страницами без обновления страницы. Это то, что делает навигацию в веб-приложениях простой и очень приятной. Итак, в этой статье я объясню, как работают маршрутизаторы Vue.js, создав в качестве примера шаблона Vue.js Router.
Приступаем к работе
Итак, давайте начнем с создания проекта Vue.js Router, установив и создав новый проект Vue.js. Нам нужно установить Node.js. Для создания нового проекта Vue.js мы будем использовать vue-cli. Выполните следующие действия. Введите и запустите в терминале следующий код:
vue init webpack vue-router // cd vue-router // npm run dev
Перейдите по адресу http://localhost:8080
Откройте приложение в текстовом редакторе. В папке компонентов откройте файл HellowWorld.vue и выполните следующие действия. Переименуйте HellowWorld.vue в 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>
Перейдите к файлу index.js в папке router и замените 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 (нам нужен только navbar). Вставьте этот код в компонент App.vue.
Вот что у нас получилось:
Затем мы собираемся создать три других компонента: Blog,Services и Contact. Внутри папки компонентов создайте новый файл, назовите его blog.vue и вставьте в него этот код:
<template> <div class="blog"> <h1>{{blog}}</h1> </div>
</template>
<script> export default{ name:'blog', data (){ return{ title:'Blog' } } }
</script>
<style scoped> </style>
Если вы хотите сделать то же самое для компонентов Services и Contact, вам нужно создать следующие файлы в папке компонентов:
home.vue
blog.vue
services.vue
contact.vue
Настройка маршрутизаторов
После того, как вы создали эти четыре компонента, нам нужно настроить маршрутизаторы, чтобы мы могли перемещаться между компонентами.
Итак, как мы можем переходить к каждому компоненту с помощью маршрутизаторов? Нам нужно изучить правила маршрутизации. Теперь нам нужно внести некоторые изменения в папки маршрутизаторов, поэтому откройте файл index.js
Выполните следующие действия. Сначала импортируйте компоненты в index.js. Импортируйте все компоненты с помощью метода import.
import home from '@/components/home' import blog from '@/components/blog' import services from '@/components/services' import contact from '@/components/contact'
Далее импортируйте Vue и модуль маршрутизатора из модуля vue-router:
import Vue from 'vue' import Router from 'vue-router' // использование маршрутизатора Vue.use(Router)
Если вы установили Vue с vue-cli, модуль vue-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:'/'
В нашем примере мы установили главную страницу в качестве страницы по умолчанию. Теперь, когда вы открываете проект в браузере, первой отображаемой страницей будет главная.
{
path:'/',
name:'home',
component:home
}
У маршрутизатора vue есть более продвинутые параметры и методы, но на данном этапе мы этой темы касаться не будем. Это список свойств и методов, которые можно использовать с vue-router:
Теперь вы можете просматривать любые компоненты, введя имя компонента!
Далее мы настроим навигацию через 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
Вы найдете тег <router-view> в файле App.vue. Это в основном представление, в котором отображаются компоненты. Оно похоже на главный div, содержащий все компоненты, и возвращает компонент, соответствующий текущему маршруту. Мы рассмотрим маршруты в следующей части, когда используем анимацию перехода.
Использование параметров внутри маршрутизаторов
На этом этапе мы будем использовать параметры для перехода к конкретным компонентам. Параметры делают маршрутизацию динамической.
Для работы с параметрами мы создадим список товаров и массив данных. Когда вы нажимаете на ссылку какого-либо товара, вы с помощью параметра переходите к информации о товаре.
В данном случае мы не будем использовать базу данных или 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>
Результат:
Чтобы мы могли переходить к компоненту информации о товаре, сначала нужно добавить событие click:
<h3 @click="goTodetail()" >{{data.productTitle}}</h3>
Затем добавьте методы:
methods:{ goTodetail() { this.$router.push({name:'details'}) }
Если вы нажмете на заголовок, он вернет undefined, потому что мы еще не создали компонент информации о товаре. Итак, давайте создадим его:
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 } ]
Сначала мы должны установить id в качестве параметра в метод goTodetail():
<h3 @click="goTodetail(data.productId)" >{{data.productTitle}}</h3>
Затем добавьте в метод маршрутизатора второй параметр. Метод $router принимает два параметра: первый — имя компонента, к которому мы хотим перейти, второй — параметр id (или любой другой параметр).
this.$router.push({name:'details',params:{Pid:proId}})
Добавьте Pid в качестве параметра в index.js внутри папки маршрутизатора:
{ 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>
Затем переберите через цикл массив товаров в файле detalils.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>
Переход
В этой части мы добавим анимацию переход к анимированному компоненту. Мы будем анимировать переход компонентов. Это делает навигацию красивой, и она создает лучший UX и UI. Чтобы задать анимацию перехода, поместите <router-view> внутри тега <transition/> и задайте для него имя класса.
App.vue
<transition name="moveInUp"> <router-view/> </transition>
Чтобы анимировать переход компонента при входе в представление, добавьте enter-active к имени, указанному для тега transition. Затем добавьте действие 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.js делает приложение более привлекательным в аспекте навигации. Она придает ему возможности одностраничного веб-приложения, и создает лучший опыт пользователя.
Автор: Said Hayani
Источник: https://medium.freecodecamp.org/
Редакция: Команда webformyself.