Routing in Vue.js anhand von Beispielen verstehen


Urheberrecht von Zeolearn

Vue.js ist ein großartiges JavaScript-Framework, das von erstellt wurde Evan Du es wird verwendet, um einzelne Webseiten und moderne Webanwendungen mit wirklich hoher Leistung und Produktion zu erstellen, und es ist die wichtigste Fertigkeit, die in der Front-End-Webentwicklung erforderlich ist, können Sie mehr über Vue.js erfahren hier .


Vue.js Stellen Sie eine Reihe von Funktionen bereit, um leistungsstarke Webkomponenten zu erstellen. Routing ist eine dieser Methoden. Es ermöglicht Benutzern das Wechseln zwischen Seiten ohne Seitenaktualisierung, was die Navigation in Ihrer Webanwendung einfach und wirklich schön macht Erklären Sie, wie Vue.js-Router funktionieren, indem Sie ein Vue-Template als Beispiel erstellen.

Beginnen wir also unser Projekt, indem wir ein neues Vue.js-Projekt installieren und erstellen.

Wir müssen node.js und Vue-cli installiert haben und verwenden Ansicht-Kli um ein neues Vue.js-Projekt zu generieren.

In Ihrem Terminal ausführen:

vue init webpack vue-router

//
cd vue-router
//
npm run dev

Navigieren Sie zu

Öffnen Sie die App in Ihrem Texteditor, öffnen Sie den Komponentenordner HellowWorld.vue Datei und benenne sie um mit home.vue entfernen Sie den gesamten Code und ersetzen Sie ihn durch diesen.

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

Und geh zu index.js Innerhalb Router Ordner und ersetzen HelloWorld mit 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 Datei sollte so aussehen!

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

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

<style>
#app {
  
}
</style>

Und jetzt schreiben wir unseren Code !!

Was wir jetzt tun werden, ist das Hinzufügen von aBootswatch Vorlage, Sie können eine beliebige Vorlage auswählen, die Sie für mich mögen. Ich werde eine auswählen Kosmo Klicken Sie auf Strg + U, um die Codequelle anzuzeigen, und kopieren Sie einfach die Navbar. Wir brauchen nur die Navbar und fügen Sie diesen Code ein App.vue Komponente.

Hier sind wir 😃

Als nächstes erstellen wir 3 weitere Komponenten: Blog, Services und Contact

Erstellen Sie im Komponentenordner eine neue Datei, nennen Sie sie blog.vue und schieben Sie diesen Code hinein

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

<style scoped>
 
</style>

Machen Sie dasselbe für service und contact component , dann müssen Sie diese Dateien in Ihrem Komponentenordner haben:

  • home.vue
  • blog.ansicht
  • services.view
  • kontakt.vue

Router-Konfig

Nachdem wir nun vier Komponenten haben, müssen wir die Router so konfigurieren, dass sie zwischen diesen Komponenten navigieren können.

Wie können wir also mit den Routern zu den einzelnen Komponenten navigieren?

Hier kommt die Regel des Routings, jetzt müssen wir einige Änderungen im Router-Ordner vornehmen, öffnen index.js

  • Importieren Sie zuerst Ihre Komponenten in index.js

Importieren Sie alle Komponenten mit import Methode

import home from '@/components/home'
import blog from '@/components/blog'
import services from '@/components/services'
import contact from '@/components/contact'
  • Zweitens importiere vue und das Router-Modul aus vue-router Modul
import Vue from 'vue'
import Router from 'vue-router'

// use router
Vue.use(Router)

Wenn Sie vue mit vue-cli installiert haben, haben Sie vue-router standardmäßig importiert

  • Und schließlich müssen wir unsere Komponente innerhalb der Router-Methode definieren und initialisieren, sie nimmt ein Array von Objekten, die Eigenschaften annehmen:
export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: home
    },
    {
      path: "
      name: 'blog',
      component: blog
    },
    {
      path: '/services',
      name: 'services',
      component: services
    },
    {
      path: '/contact',
      name: 'contact',
      component: contact
    }
  ]
})
  • path : bedeutet den Pfad der Komponente
  • name: Name der Komponente
  • component : die Ansichtskomponente

Um eine beliebige Komponente als Standardkomponente festzulegen, setzen Sie den Schrägstrich auf die Pfadeigenschaft,

path:'/'

In unserem Beispiel haben wir die Startseite als Standardseite festgelegt. Wenn Sie nun das Projekt im Browser öffnen, erscheint als erste Seite die Startseite.

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

Der Vue-Router verfügt über erweiterte Parameter und Methoden, aber wir springen nicht hinein. Dies ist die Liste der Eigenschaften und Methoden, die der Vue-Router bereitstellt:

Jetzt können Sie nach beliebigen Komponenten suchen, indem Sie den Namen der Komponente eingeben!!

Jetzt machen wir die Navigation durch die Navbar die wir mit erstellen router-link Element.

Dazu sollten wir das Element „“ wie folgt durch „“ ersetzen:

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

Das Router-Link Take ‘to=”’ Attribut, das den Pfad der Komponente als Wert nimmt.

Router-Ansicht

Du wirst finden <router-view> eintaggen App.vue Datei, es ist die Ansicht, in der die Komponenten gerendert werden, es ist wie das Haupt-Div, das alle Komponenten enthält und die Komponente zurückgibt, die der aktuellen Route entspricht, wir werden im nächsten Teil mit der Routenansicht im Übergang arbeiten.

Router mit Parametern

In diesem Teil werden wir Parameter verwenden, um zu bestimmten Komponenten zu navigieren, die Parameter sind wirklich wichtig, sie sorgen dafür, dass Router dynamisch arbeitet.

Um mit Parametern zu arbeiten, erstellen wir eine Produktliste und eine Reihe von Daten. Wenn Sie also auf den Link eines Produkts klicken, gelangen wir über einen Parameter zu den Seitendetails.

In dieser Situation werden wir keine Datenbank oder API verwenden, um Produktdaten abzurufen, also müssen wir ein Array von Produkten erstellen, von dem wir annehmen, dass es eine Datenbank ist.

Innen home.vue Komponente fügen Sie das Array innerhalb der data() Methode wie folgt ein:

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

Rufen Sie dann das Produkt-Array ab und schleifen Sie es mit ein v-for Richtlinie .

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

Das Ergebnis:

Um zur Detailkomponente zu navigieren, müssen wir zuerst ein Klickereignis hinzufügen

<h3 [@click]( "Twitter profile for @click")="goTodetail()" >{{data.productTitle}}</h3>

Fügen Sie dann Methoden hinzu

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

Wenn Sie auf den Titel klicken, wird undefiniert zurückgegeben, da wir die Detailkomponente noch nicht erstellt haben. Erstellen wir also eine:

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>

Jetzt können wir navigieren, ohne einen Fehler zu bekommen 😃

Wie können wir nun zur Detailseite navigieren und die übereinstimmenden Daten abrufen, obwohl wir keine Datenbank haben?

Wir werden dasselbe Produkt-Array in der Detailkomponente verwenden, damit wir die ID erstellen können, die aus der URL stammt

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

Zuerst müssen wir die id auf die Methode goTodetail() als Parameter setzen,

<h3 [@click]( "Twitter profile for @click")="goTodetail(data.productId)" >{{data.productTitle}}</h3>

Fügen Sie dann der Router-Methode einen zweiten Parameter hinzu,

Die $router-Methode nimmt zwei Parameter, zuerst die name der Komponente, zu der wir navigieren möchten, und der zweite Parameter ist die id oder irgendein anderer Parameter.

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

Fügen Sie Pid als Parameter hinzu index.js Innerhalb router Mappe

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

home.vue

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

Verwenden Sie diese Codezeile, um den übereinstimmenden Parameter abzurufen:

this.$route.params.Pid

details.vue

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

Schleifen Sie dann das Produkt-Array in durch detalils.vue und überprüfen Sie das Objekt, das mit dem Parameter Pid übereinstimmt, und geben Sie die Daten zurück

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

Sie sehen jetzt, wenn wir auf den Link eines Produkts klicken, gelangen wir zum selben Produkt i!

Detail. vue Komponente!

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

Der Übergang

In diesem Teil werden wir den Übergang der Komponente animieren, den Übergang der Komponenten animieren, die Navigation großartig machen und eine Art UX und UI erstellen, also machen Sie eine Animation, während der Übergang den „“ innerhalb des Tags „“ und geben Sie ihm den Namen class .

app.vue

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

Um den Übergang der Komponente zu animieren, wenn sie zur Ansicht hinzugefügt wird enter-active zu dem Namen, der dem Übergangs-Tag gegeben wurde, und im Blatt hinzufügen leave-active und geben Sie ihm dann die CSS-Übergangseigenschaften wie folgt!

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

Verwendung von CSS3-Animation:

Jetzt werden wir mit @keyframes in CSS3 animieren

EIN – wenn die Komponente in die Ansicht eintritt

Fügen Sie der Ansicht einen Fade-Effekt hinzu, wenn die Komponente eintritt

.moveInUp-enter-active{
  animation: fadeIn 1s ease-in;
}
[@keyframes]( "Twitter profile for @keyframes") fadeIn{
  0%{
    opacity: 0;
  }
  50%{
    opacity: 0.5;
  }
  100%{
    opacity: 1;
  }
}

B – wenn die Komponente die Ansicht verlässt

Jetzt werden wir die Komponente nach oben bewegen, wenn sie die Ansicht verlässt!

.moveInUp-leave-active{
  animation: moveInUp .3s ease-in;
}
[@keyframes]( "Twitter profile for @keyframes") moveInUp{
 0%{
  transform: translateY(0);
 }
  100%{
  transform: translateY(-400px);
 }
}

Wie Sie jetzt sehen, können Sie Ihre eigenen Animationen und Übergänge für Ihre Komponenten erstellen.

Das ist es, wir sind fertig! 😆

Sie können den Quellcode herunterladen hier .

Umbruch und Schluss

Das Routing in Vue.js macht Ihre App in Bezug auf die Navigation so großartig, verleiht ihr die Energie der Single-Page-Webanwendung und schafft eine bessere Benutzererfahrung.

Wenn Sie Bootstrap 4 lernen möchten, schauen Sie sich meinen Kurs auf Skillshare an Empfehlungslink und erhalten Sie 2 Monate kostenlosen Zugriff auf die Klasse 20000.

Ursprünglich veröffentlicht auf zeolearn.com

Abonnieren Sie diese Mail-Liste um mehr über Front-End-Themen zu erfahren, und folgen Sie mir auf Twitter.

Similar Posts

Leave a Reply

Your email address will not be published.