falbar Как использовать роутинг в Vue для создания хорошего пользовательского интерфейса

Как использовать роутинг в Vue для создания хорошего пользовательского интерфейса

2 декабря 2018 Перевод 177 0

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.

vue-browse-to-httplocalhost8080

Откройте приложение в текстовом редакторе. Из папки компонентов откройте файл «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.

Вот что получится:

vue-here-we-are

Далее нужно прописать создание 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.

vue-so-open-indexjs

Вам нужно будет выполнить следующие шаги:

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:

  • Вложенные роутеры;
  • Описание с именем;
  • Перенаправление и дополнительные имена;
  • Указатель навигации;
  • Копия роутера.

Теперь вы можете просматривать любые компоненты, вводя только имя!

vue-now-you-can-browse-to-any-components

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>

Результат:

vue-then-fetch-and-loop-into-the-products-array

Чтобы перейти к компоненту деталей, сначала нужно добавить событие клика:

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

Теперь мы можем переходить, не получая ошибки!

vue-now-we-can-navigate-without-getting-an-error

Как можно перейти на страницу деталей и получить подходящие данные, если у нас нет базы данных?

Мы используем тот же массив продуктов и в компоненте деталей. Таким образом мы сможем обрабатывать идентификатор, который исходит из 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}})
    }
}
vue-homevue

Чтобы получить соответствующий параметр, используйте этот код:

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"
        }
    }
}

Теперь вы видите, что при клике на какой-либо продукт мы переходим на страницу этого продукта!

vue-products-link-it-get-us-to-that-product

Компонент 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>

Переходы

vue-the-transition

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

Чтобы сделать анимированный переход, поместите <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;
    }
}
vue-using-css3-animation

Добавим еще один эффект затухания. На этот раз он будет срабатывать при закрытии компонента.

Теперь мы сделаем так, чтобы компонент поднимался выше, когда он закрывается.

.moveInUp-leave-active{
    animation: moveInUp .3s ease-in;
}
@keyframes moveInUp{
    0%{
        transform: translateY(0);
    }
    100%{
        transform: translateY(-400px);
    }
}
vue-using-css3-animation-make-the-component-move

Теперь вы можете создавать собственные анимации и переходы для своих компонентов.

Вот и все - мы закончили!

Исходный код можно скачать по ссылке.

Заключение

Когда дело касается навигации, Vue Routing - именно то, что может сделать ваше приложение отличным и удобным. Благодаря нему кажется, что в веб-приложении всего одна страница. У пользователей от этого возникают более приятные впечатления.

Реклама
Комментариев еще не оставлено
no_avatar