Рубрики
Без рубрики

Как использовать маршрутизацию в Vue.js, чтобы создать лучший пользовательский опыт

Vue.js – отличный JavaScript Framework, созданная Evan You. Он используется для создания приложений для веб-страниц и гибких компонентов, и это один из наиболее необходимых навыков в разработке переднего конца. Вы можете узнать больше о Vue.js здесь. Vue.js предоставляет кучу

Автор оригинала: FreeCodeCamp Community Member.

Vue.js – отличный JavaScript Framework, созданная Эван ты Отказ Он используется для создания приложений для веб-страниц и гибких компонентов, и это один из наиболее необходимых навыков в разработке переднего конца. Вы можете узнать больше о Vue.js здесь Отказ

Vue.js Обеспечивает кучу функций, которые позволяют создавать многоразовые веб-компоненты. Маршрутизация является одним из тех методов. Это позволяет пользователю переключаться между страницами без обновления страницы. Это то, что делает навигацию легко и очень приятно в ваших веб-приложениях.

Таким образом, в этой статье я объясню, как Vue.js маршрутизаторы работают, создавая Vue шаблон в качестве примера.

Начиная

Итак, давайте начнем с нашей маршрутой Vue.js R Проект путем установки и создания нового Vue.js проект. Нам нужно установить Node.js. Мы будем использовать Vue-Cli Создать новый проект Vue.js. Следуйте инструкциям, указанным ниже:

Введите следующий код в вашем терминале и запустите:

vue init webpack vue-router

//
cd vue-router
//
npm run dev

Обзор http://localhost: 8080

Откройте приложение в вашем текстовом редакторе. Внутри папки компонентов откройте Hellowworld.vue Файл и выполните следующие действия:

  • Переименовать Hellowworld.vue к home.vue Отказ Удалите весь код и замените его этим:





  • Перейти к index.js внутри Маршрутизатор папка и заменить HellowOrld с Главная :
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 Файл должен выглядеть так:





И теперь давайте напишем наш код!

Теперь мы собираемся добавить Bootswatch шаблон. Вы можете выбрать любой шаблон, который вам нравится. Я выберу Космо Отказ Нажмите Ctrl + U, чтобы просмотреть источник кода и просто скопируйте Навкар (Нам просто нужна Navbar). Вставьте этот код в APP.Vue составная часть.

Мы здесь ?

Далее мы создадим три других компонента: Блог , Услуги и Контакт Отказ

Внутри папки компонентов создайте новый файл, назовите его blog.vue и протолкните этот код в него:




Если вы хотите сделать то же самое для обновления и контактного компонента, у вас должны быть эти файлы в папке компонентов:

  • Home.vue.vue.
  • Blog.vue.vue.vue.vue.
  • services.vue.vue.
  • Контакт .Vue.vue.

Маршрутизаторы Config

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

Так как мы можем перейти к каждому компонентам, используя маршрутизаторы?

Нам нужно изучать правила маршрутизации. Теперь мы должны сделать некоторые модификации внутри папки маршрутизатора, поэтому открыть index.js.

Следуй этим шагам:

  • Сначала импортируйте свои компоненты в index.js. Импортируйте все компоненты, используя Импорт метод.
import home from '@/components/home'
import blog from '@/components/blog'
import services from '@/components/services'
import contact from '@/components/contact'
import Vue from 'vue'
import Router from 'vue-router'

// use router
Vue.use(Router)

Если вы установили Vue с Vue-Cli, у вас будет Vue-маршрутизатор Модуль импортируется по умолчанию.

  • Наконец, внутри папки маршрутизатора мы должны настроить маршрутизаторы, чтобы заставить их работать. Метод маршрутизатора принимает массив объектов, которые, в свою очередь, принимает свойства каждого компонента:
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
    }
  ]
})
  • путь : путь компонента
  • Имя : имя компонента
  • Компонент : вид компонента

Чтобы сделать любой компонент компонент по умолчанию, установите Slash (‘/’) в свойство PATH:

path:'/'

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

{
  path:'/',
  name:'home',
  component:home
}

Vue-маршрутизатор имеет более продвинутые параметры и методы, но мы не прыгаем в этот раздел на этом этапе.

Это список свойств и методов, которые вы можете использовать с Vue-маршрутизатором:

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

Маршрутизатор-ссылка

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

Для этого мы должны заменить < /A> Eleme NT by & l t;/marriter/link> Вот так:



Маршрутизатор-ссылка берет к = 'путь' атрибут, который принимает путь компонента в виде значения.

Маршрутизатор-вид

Вы найдете EW> Tag I n a PP.Vue файл. Это в основном вид, где компоненты отображаются. Это похоже на главный Div, который содержит все компоненты, и он возвращает компонент, который соответствует текущему маршруту. Мы будем ди Scuss Routh E-View в следующей части, когда мы используем анимационный переход.

Использование параметров внутри маршрутизаторов

На данный момент мы будем использовать параметры для перемещения к определенным компонентам. Параметры делают маршрутизацию динамическими.

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

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

Внутри home.vue Компонент, поставьте массив в методе данных () так же, как это:

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-для Директива.

{{data.productTitle}}

Результат:

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

{{data.productTitle}}

Затем добавьте методы:

methods:{
  goTodetail() {
    this.$router.push({name:'details'})
  }

Если вы нажмете заголовок, он вернется undefined, потому что мы еще не создали детали компонента. Итак, давайте создадим один:

Детали


Теперь мы можем перемещаться без получения ошибки?

Теперь, как мы можем просмотреть страницу «Детали» и получите соответствующие данные, если у нас нет базы данных?

Мы собираемся использовать те же массив продуктов в компоненте детали. Итак, мы можем MACH ID, который исходит от 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 () в качестве параметра:

{{data.productTitle}}

Затем добавьте второй параметр в метод маршрутизатора.

$ маршрутизатор Метод принимает два параметра: во-первых, Имя компонента, который мы хотим ориентироваться, а во-вторых, ID Параметр (или любой другой параметр).

this.$router.push({name:'details',params:{Pid:proId}})

Добавить PID в качестве параметра в index.js внутри Маршрутизатор папка:

{
      path: '/details/:Pid',
      name: 'details',
      component: details
    }

Home.vue.vue.

methods:{
  goTodetail(prodId) {
    this.$router.push({name:'details',params:{Pid:proId}})
  }
  }

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

this.$route.params.Pid

Детали

the product id is :{{this.$route.params.Pid}}

Затем петлю через массив продуктов в Детали. Просмотр И проверьте объект, который соответствует параметру PID и вернуть его данные:

{{product.productTitle}}

/// export default{ name:'details', data(){ return{ proId:this.$route.params.Pid, title:"details" } }

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

detail.vue составная часть:


Переход

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

Чтобы сделать анимационный переход, поместите « »и дайте ему имя класса.

App.vue.vue.


         
  

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

Кстати…

Если вы хотите узнать Bootstrap 4, проверьте мой класс на SkillShare с этим Реферальная ссылка И получить 2 бесплатных месяца доступ к 20 000 классов.

Первоначально опубликовано на ZeoLearn.com