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

kak ispolzovat marshrutizacziyu v vuejs dlya uluchsheniya raboty polzovatelya

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

QnEEdc6mWqtQDaulHYzeZFEHkWoLl0LgAkw4

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

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

Начинаем

Итак, начнем с нашего Vue.js Routeр проекта путем установки и создания нового проекта Vue.js. Нам необходимо установить Node.js. Мы будем использовать vue-cli для создания нового проекта Vue.js. Выполните следующие действия.

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

vue init webpack vue-router

//
cd vue-router
//
npm run dev

Перейдите на http://localhost:8080

HckFEYSBlXmo-qMuT9SeU8zFWxRBm0RKDSlE

Откройте приложение в текстовом редакторе. В папке компонентов откройте файл 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 внутри маршрутизатор папку и замените 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
    }
  ]
})

The App.vue файл должен выглядеть так:

<template>
  <div id="app">
    
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  
}
</style>

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

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

Мы здесь ?

43YDKXgEQvgIlHa3ff3wLUttTYDiP4JBsMOS

Далее мы создадим три других компонента: 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>

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

  • home.vue
  • blog.vue
  • services.vue
  • contact.vue

Конфигурация маршрутизаторов

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

Итак, как мы можем перейти к каждому компоненту с помощью маршрутизаторов?

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

xwekScgLyanvWr3SCo9hgnZ4HUFqWpuELK0v

Выполните следующие действия:

  • Сначала импортируйте свои компоненты в 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'

// use 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-router имеет более расширенные параметры и методы, но на данный момент мы не переходим к этому разделу.

Вот список свойств и методов, которые вы можете использовать с vue-router:

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

iSIQ-ngDnOuHEJkA-CfWizS-NCTtnPHb9qaQ

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

Для этого нам следует заменить </a> элементnt by <router-link>&lt;/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>

Ссылка на маршрутизатор принимает to='path' атрибут, принимающий путь к компоненту как значение.

Просмотр маршрутизатора

Вы найдете <router-view> тег in the Aфайл pp.vue. По сути это вид, где отображаются компоненты. Это как главный div, содержащий все компоненты, и он возвращает компонент, соответствующий текущему маршруту. Мы будемscuss route-view в следующей части, когда мы используем анимационный переход.

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

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

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

В этой ситуации мы не будем использовать базу данных или 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
      }
      ]
    }
  }
}

Затем извлеките и перейдите к массиву Products с помощью v-for директива.

<div class="row">
      <div class="col-md-4 col-lg4" v-for="(data,index) in products" :key="index">
        <img :src=" class="img-fluid">
         <h3>{{data.productTitle}}</h3>
      </div>
    </div>

Результат:

EHmmP-MWsUXJflne-niLX1WfrxIwn4HzQIH9

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

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

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

x1GAOi94gMVYSRG4SjupVR4p4hwGOSoctmcf

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

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

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

The $router метод принимает два параметра: первый, the 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}})
  }
  }
n6womVRZITagD7pZOGmNvF9pQfB5NJMnGcxi

Для получения соответствующего параметра используйте эту строку кода:

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=" class="img-fluid">
     </div>
    </div>
    
///
export default{
  name:'details',
  data(){
   return{
    proId:this.$route.params.Pid,
    title:"details"
     }
}

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

7VVd405SDvDWC3scUXaVyggyn1IsY6QNoQNd

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

Переход

LF9rGJaP6F6pQriWw4xFa7DjFMvbTSYttLAw

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

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

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;
  }
}
FJf7dZujiqIrVYkccKmP3uSyIS4gk3n62Gxh

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

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

.moveInUp-leave-active{
  animation: moveInUp .3s ease-in;
}
@keyframes moveInUp{
 0%{
  transform: translateY(0);
 }
  100%{
  transform: translateY(-400px);
 }
}
oOUTnR9ZLYHxbapDH7MjMLZn244aTtehGXrIQ

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

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

Вы можете скачать исходный код здесь .

Подведению

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

Кстати говоря…

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

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

Подпишитесь на этот список рассылки, чтобы узнать больше о темах Front End, и следите за мной в Twitter.

Добавить комментарий

Ваш адрес email не будет опубликован.