Vue.js este un excelent cadru JavaScript creat de Evan Tu. Este folosit pentru a construi aplicații pentru o singură pagină web și componente flexibile și este una dintre cele mai necesare abilități în dezvoltarea front-end Web. Puteți afla mai multe despre Vue.js Aici.

Cum se utilizeaza rutare in Vuejs pentru a crea o

Vue.js oferă o grămadă de caracteristici care vă permit să creați componente web reutilizabile. Rutare este una dintre aceste metode. Permite utilizatorului să comute între pagini fără a actualiza pagina. Acesta este ceea ce face navigarea ușoară și foarte plăcută în aplicațiile dvs. web.

Deci, în acest articol, voi explica cum funcționează routerele Vue.js, construind un șablon Vue ca exemplu.

Noțiuni de bază

Deci, să începem cu ruta Vue.jsr proiect prin instalarea și crearea unui nou Vue.js proiect. Trebuie să avem Node.js instalat. Vom folosi vue-cli pentru a genera un nou proiect Vue.js. Urmați pașii de mai jos:

Tastați următorul cod în terminal și rulați:

vue init webpack vue-router
//cd vue-router//npm run dev

Navigați la http: // localhost: 8080

Cum se utilizeaza rutare in Vuejs pentru a crea o

Deschideți aplicația în editorul de text. În folderul de componente, deschideți fișierul HellowWorld.vue fișier și urmați acești pași:

  • Redenumiți HellowWorld.vue la home.vue. Eliminați tot codul și înlocuiți-l cu acesta:
<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>
  • Mergi la index.js în interiorul router dosar și înlocuiți HelloWorld cu 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 fișierul ar trebui să arate astfel:

<template>  <div id="app">        <router-view/>  </div></template>
<script>export default {  name: 'App'}</script>
<style>#app {  }</style>

Și acum să scriem codul nostru!

Acum vom adăuga un Ceas de cizme șablon. Puteți alege orice șablon doriți. Voi alege Cosmo. Faceți clic pe Ctrl + U pentru a vizualiza sursa codului și doar copiați Navbar (avem nevoie doar de bara de navigație). Lipiți acest cod în App.vue componentă.

Iată-ne ?

1611969127 511 Cum se utilizeaza rutare in Vuejs pentru a crea o

În continuare, vom crea alte trei componente: Blog,Services și Contact.

În dosarul componentelor, creați un fișier nou, denumiți-l blog.vueși împingeți acest cod în el:

<template> <div class="blog">  <h1>{{blog}}</h1> </div></template><script> export default{  name:'blog',  data (){   return{    title:'Blog'   }  } }</script>
<style scoped> </style>

Dacă doriți să faceți același lucru pentru serviciul și componenta de contact, trebuie să aveți aceste fișiere în dosarul componentelor:

  • acasă.vue
  • blog.vue
  • servicii.vue
  • contact.vue

Configurarea routerelor

Acum, după crearea acestor patru componente, trebuie să configurăm routerele astfel încât să putem naviga între componente.

Deci, cum putem naviga la fiecare componentă folosind routerele?

Trebuie să învățăm regulile de rutare. Acum, trebuie să facem câteva modificări în folderul routerului, așa că deschideți index.js

1611969127 883 Cum se utilizeaza rutare in Vuejs pentru a crea o

Urmați acești pași:

  • Mai întâi importați componentele dvs. în index.js. Importați toate componentele folosind import metodă.
import home from '@/components/home'import blog from '@/components/blog'import services from '@/components/services'import contact from '@/components/contact'
  • Al doilea import Vue și modulul router de la vue-router modul:
import Vue from 'vue'import Router from 'vue-router'
// use routerVue.use(Router)

Dacă ați instalat Vue cu vue-cli, veți avea vue-router modul importat implicit.

  • În cele din urmă, în folderul routerului, trebuie să configurăm routerele pentru a le face să funcționeze. Metoda routerului ia o matrice de obiecte care, la rândul său, ia proprietățile fiecărei componente:
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 : calea componentei
  • name: numele componentei
  • component : vizualizarea componentei

Pentru a face din orice componentă componenta implicită, setați slash (‘/’) la proprietatea cale:

path:'/'

În exemplul nostru, setăm pagina de pornire ca pagină implicită. Acum, când deschideți proiectul în browser, prima pagină care va apărea este pagina de pornire.

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

Vue-router are parametri și metode mai avansate, dar nu trecem în această secțiune în acest moment.

Aceasta este lista de proprietăți și metode pe care le puteți utiliza cu vue-router:

Acum puteți naviga la orice componentă tastând numele componentei!

1611969128 265 Cum se utilizeaza rutare in Vuejs pentru a crea o

Acum vom configura navigarea prin bara de navigare pe care am creat-o folosind elementul router-link.

Pentru a face acest lucru, ar trebui să înlocuim </ a> element by <router-link>&lt; / router / link> ca acesta:

<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 preia to='path' atribut care ia calea componentei ca valoare.

Vizualizare router

Veți găsi <router-view> tag in the App.vue fișier. Practic este vizualizarea în care sunt redate componentele. Este ca divul principal care conține toate componentele și returnează componenta care se potrivește cu ruta curentă. Vom discuss route-view în partea următoare când folosim tranziția de animație.

Utilizarea parametrilor din interiorul routerelor

În acest moment, vom folosi parametri pentru a naviga la anumite componente. Parametrii fac rutarea dinamică.

Pentru a lucra cu parametrii, vom crea o listă de produse și o serie de date. Când faceți clic pe linkul oricărui produs, acesta ne va duce la detaliile paginii printr-un parametru.

În această situație, nu vom folosi o bază de date sau un API pentru a prelua datele produselor. Deci, ceea ce trebuie să facem este să creăm o matrice de produse care să acționeze ca o bază de date.

În interiorul home.vue componentă, puneți matricea în metoda data () la fel:

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

Apoi, preluați și conectați-vă în produsul Array folosind v-for directivă.

<div class="row">      <div class="col-md-4 col-lg4" v-for="(data,index) in products" :key="index">        <img :src="https://www.freecodecamp.org/news/how-to-use-routing-in-vue-js-to-create-a-better-user-experience-98d225bbcdd9/data.image" class="img-fluid">         <h3>{{data.productTitle}}</h3>      </div>    </div>

Rezultatul:

1611969128 292 Cum se utilizeaza rutare in Vuejs pentru a crea o

Pentru a naviga la componenta detalii, trebuie mai întâi să adăugăm un eveniment de clic:

<h3 @click="goTodetail()" >{{data.productTitle}}</h3>

Apoi adăugați metode:

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

Dacă faceți clic pe titlu, acesta va reveni nedefinit, deoarece nu am creat încă componenta de detalii. Deci, să creăm unul:

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

Acum putem naviga fără a primi o eroare?

1611969128 117 Cum se utilizeaza rutare in Vuejs pentru a crea o

Acum, cum putem naviga la pagina de detalii și să obținem datele potrivite dacă nu avem o bază de date?

Vom folosi aceeași matrice de produse în componenta detalii. Deci, putem transforma ID-ul care vine de la adresa 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      }      ]

Mai întâi trebuie să setăm id-ul la metoda goTodetail () ca parametru:

<h3 @click="goTodetail(data.productId)" >{{data.productTitle}}</h3>

Apoi adăugați un al doilea parametru la metoda routerului.

$router metoda ia doi parametri: primul, name a componentei pe care dorim să o navigăm și în al doilea rând id parametru (sau orice alt parametru).

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

Adăugați Pid ca parametru în index.js în interiorul router pliant:

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

acasă.vue

methods:{  goTodetail(prodId) {    this.$router.push({name:'details',params:{Pid:proId}})  }  }
1611969128 722 Cum se utilizeaza rutare in Vuejs pentru a crea o

Pentru a obține parametrul potrivit, utilizați această linie de cod:

this.$route.params.Pid

detalii.vue

<h2>the product id is :{{this.$route.params.Pid}}</h2>

Apoi buclați prin matricea de produse în detalils.vue și verificați obiectul care se potrivește cu parametrul Pid și returnați-i datele:

<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="https://www.freecodecamp.org/news/how-to-use-routing-in-vue-js-to-create-a-better-user-experience-98d225bbcdd9/product.image" class="img-fluid">     </div>    </div>
///export default{  name:'details',  data(){   return{    proId:this.$route.params.Pid,    title:"details"     }}

Acum vedeți că, atunci când facem clic pe linkul oricărui produs, ne ajută la acel produs!

1611969129 858 Cum se utilizeaza rutare in Vuejs pentru a crea o

detaliu.vue componentă:

<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="https://www.freecodecamp.org/news/how-to-use-routing-in-vue-js-to-create-a-better-user-experience-98d225bbcdd9/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>

Tranziția

1611969129 612 Cum se utilizeaza rutare in Vuejs pentru a crea o

În această parte, vom adăuga o tranziție de animație la componenta animată. Vom anima tranziția componentelor. Face navigarea minunată și creează un UX și o UI mai bune.

Pentru a efectua o tranziție de animație, puneți „” în eticheta „” și ​​dați-i un nume de clasă.

App.vue

<transition name="moveInUp">         <router-view/>  </transition>

Pentru a anima tranziția componentei atunci când intră în vizualizare, adăugați enter-active la numele dat etichetei de tranziție. Apoi adauga leave-active și apoi dați-i proprietățile de tranziție CSS la fel:

.moveInUp-enter-active{  opacity: 0;  transition: opacity 1s ease-in;}

Utilizarea animației CSS3

Acum vom anima cu ajutorul @keyframes în CSS3.

Când componenta intră în vizualizare, adăugați un efect de estompare vizualizării.

.moveInUp-enter-active{  animation: fadeIn 1s ease-in;}@keyframes fadeIn{  0%{    opacity: 0;  }  50%{    opacity: 0.5;  }  100%{    opacity: 1;  }}
1611969129 922 Cum se utilizeaza rutare in Vuejs pentru a crea o

Adăugați un alt efect de estompare când componenta părăsește vizualizarea.

Acum vom face ca componenta să se deplaseze în și în sus când va părăsi vizualizarea.

.moveInUp-leave-active{  animation: moveInUp .3s ease-in;}@keyframes moveInUp{ 0%{  transform: translateY(0); }  100%{  transform: translateY(-400px); }}
1611969130 56 Cum se utilizeaza rutare in Vuejs pentru a crea o

Acum puteți crea propriile animații și tranziții pentru componentele dvs.

Gata – am terminat! ?

Puteți descărca codul sursă Aici .

Înfășurându-se

Rutarea în Vue.js face ca aplicația dvs. să fie minunată atunci când vine vorba de navigare. Îi oferă acea energie a aplicației web cu o singură pagină și creează o experiență mai bună pentru utilizator.

Apropo…

Dacă doriți să învățați Bootstrap 4, consultați clasa mea despre Skillshare cu acest lucru Link de referința și obțineți 2 luni gratuite de acces la 20.000 de clase.

Publicat inițial pe zeolearn.com

Abonează-te la asta mailList pentru a afla mai multe despre subiectele Front End și Urmăriți-mă pe Stare de nervozitate.

Apropo, am lucrat recent cu un grup puternic de ingineri software pentru una dintre aplicațiile mele mobile. Organizația a fost excelentă, iar produsul a fost livrat foarte repede, mult mai repede decât alte firme și freelanceri cu care am lucrat și cred că pot să le recomand sincer pentru alte proiecte. Trimiteți-mi un e-mail dacă doriți să luați legătura – said@devsdata.com.