Opas Vue-reitittimeen

esittely

Kun kehität verkkosovelluksia Vue.js:n avulla, ellet ole rakentamassa a Yhden sivun sovellus (SPA), haluat yhdistää useita sivuja aloitussivulle, jotta käyttäjät voivat selata niitä. Tämä tunnetaan nimellä reititys.

Reititys on prosessi, jolla käyttäjä navigoidaan verkkosivuston eri sivuille. Vue.js on JavaScript-kehys, jota käytetään yhden sivun sovellusten luomiseen, mikä tarkoittaa, että tämä sovellus ladataan vain kerran palvelimelta selaimeen, eikä selaimen tarvitse latautua uudelleen reititettäessä. sen sijaan se yksinkertaisesti pyytää näitä sivuja ja ne ladataan.

Tässä oppaassa opimme reitittämään Vue.js:n avulla ja perehdymme syvällisesti erilaisiin reititystyyppeihin, joita voidaan tehdä ja miten ne voidaan tehdä.

Päästä alkuun

Vue.js:n reititys on tehty Vue-reititin, joka toimii yhdessä Vue-ydinkirjaston kanssa, jotta voimme määrittää reititysjärjestelmän. Haluaisimme käyttää vue-router kahdessa skenaariossa projektissamme. Haluamme joko käyttää reititintä olemassa olevassa projektissa tai lisätä sen luodessasi uutta projektia.

Asenna Vue-reititin olemassa olevaan projektiin

Integrointi vue-router olemassa olevaan projektiin voi olla tekninen, ja käymme nämä yksityiskohdat nyt läpi. Ensimmäinen askel olisi asentaa vue-reititinpaketti käyttämällä seuraavaa komentoa:

! npm install vue-router@4

Kun se on asennettu, siirry kohtaan src kansio ja luo kansio nimeltä router, jota seuraa tiedosto nimeltä index.js vuonna router kansio, joka toimii reitittimen asetustiedostona. Meidän src hakemisto näyttää nyt tältä:

In index.js Varmista, että liitämme alla olevan koodin, joka on reitittimen määrityskoodi:

import { createRouter, createWebHashHistory } from 'vue-router'
import HomePage from '../views/HomePage.vue' const routes = [ { path: '/', name: 'home', component: HomePage },
] const router = createRouter({ history: createWebHashHistory(), routes
})
export default router

Meillä routes matriisi, joka sisältää yhden objektin, joka voi olla useita objekteja, joissa jokainen objekti edustaa yhtä reittiä. Toistaiseksi loimme vain sellaisen, joka ohjaa kotisivukomponenttiin.

Jokainen näistä routes objektit koostuu tyypillisesti path, joka on URL-osoite suhteessa sivuston juureen name, joka toimii tunnisteena, ja component, jonka toimme sivun yläreunasta.

Reittitaulukon lisäksi määritimme reitittimen ilmentymän alareunaan luomalla a createRouter() toiminto ja ohittaa history keskeiset arvot ja routes matriisi, ja sitten viemme sen router esimerkiksi käytettäväksi sovelluksessamme.

Jos haluat käyttää tätä reititinkokoonpanoa sovelluksessamme, avaa main.js Tiedosto src kansio, import router from "./router"ja lisää sitten .use(router) välillä createApp(App) ja .mount('#app') aivan kuten alla:

import router from './router' createApp(App).use(router).mount('#app')

Tämä vue-router on määritetty maailmanlaajuisesti sovelluksessamme, ja seuraava askel on käyttää sitä sovelluksessamme. Tämä onnistuu helposti sisällyttämällä <router-view /> puitteissa App.js mallitunniste, joka hahmontaa vain vastaavan reitin:

<!--App.vue -->
<template>
<!-- Any code placed here is going to be fixed -->
<!-- This will only show the page that matches the selected route --> <router-view /> <!-- Any code placed here is going to be fixed -->
</template> <script> export default { name: 'App', }
</script>

Reittien määrittäminen Vue.js:ssä

Reitit luodaan yleensä router/index.js tiedoston reittitaulukkoon, ja nämä reitit muodostavat yhteyden komponentteihin. On hyvä käytäntö luoda näkymäkansio, johon kaikki sivunäkymät tallennetaan. Esimerkiksi:

Tässä vaiheessa osaamme nyt määrittää reitit manuaalisesti.

Asenna Vue Router Vue CLI:llä

Jos aiomme luoda uuden projektin ja uskomme, että hyödynnämme vue-router, se on helpompi tehdä projektia luotaessa.

Meidän tarvitsee vain asentaa uusin versio Vue CLI:n avulla vue-router kun valitset manuaalisesti ominaisuuksia projektin luomisen aikana:

Lue ja opi lisää Vue.js-projektin luomisesta meidän kautta Vue CLI:n opas!

Laiskoja latausreittejä Vue-reitittimellä

Sovelluksemme koon kasvaessa paketin koko kasvaa, jolloin sivustomme latautuminen kestää kauemmin. Voimme käyttää vue-router toteuttaa laiska lataus välttääksesi joidenkin tiettyjen reittien lataamisen, kunnes käyttäjä pyytää niitä erikseen.

Tämä tapahtuu yleensä reitittimen asetustiedostossa poistamalla import lausekkeen yläreunassa ja korvaamalla sen dynaamisella tuontilausekkeella reittimme komponenttivaihtoehdossa:

import { createRouter, createWebHashHistory } from 'vue-router';
const routes = [ { path: '/', name: 'home', component: () => import(/* webpackChunkName: "home" */ '../views/HomePage.vue'), }, { path: '/about', name: 'about', component: () => import(/* webpackChunkName: "about" */ '../views/AboutPage.vue'), },
];
const router = createRouter({ history: createWebHashHistory(), routes,
});
export default router;

Navigointi reittien välillä

Toistaiseksi olemme pystyneet luomaan reittejä, mutta miten navigoimme sovelluksessamme? Käytämme <router-link> -tunnisteen sijaan <a> HTML-elementti käsittelemään reititystä.

Jos esimerkiksi haluamme luoda navigointipalkin sovelluksemme yläosaan, voimme tehdä tämän sovelluksessa App.js tiedosto yläpuolella <router-view/> tag, jotta se näkyy kaikilla reiteillä:

<nav> <router-link to="/">Home</router-link> | <router-link to="/about">About</router-link>
</nav>

Reititinlinkki hyväksyy to='path' attribuutti, joka vie käyttäjän komponentin polulle sellaisena kuin se on asetettu reittiä määritettäessä. Tämä toimii kuten href='path``' attribuutti HTML:ssä.

Nimettyjen reittien käyttäminen

Nimettyjen reittien avulla voimme kulkea sisään name avain, jolla on pääsy name ominaisuus, jonka asetamme määrittäessämme reittejä sen sijaan, että käyttäisimme polkua sitomalla tiedot tällä tavalla:

<router-link :to="{ name: 'About' }">About</router-link>

Tämän menetelmän etuna on se, että jos päätämme muuttaa reittipolkua suurille sovelluksillemme, meidän ei tarvitse alkaa muuttaa kaikkia linkkien polkuja, mikä voi olla hankalaa.

Dynaaminen reititys

Saattaa syntyä tilanteita, jotka edellyttävät dynaamisen reitityksen käyttöä tarpeettoman sivun toiston välttämiseksi. Oletetaan esimerkiksi, että meillä on luettelo hedelmistä ja haluamme, että käyttäjä voi napsauttaa tiettyä hedelmää ja vain tiedot kyseisestä hedelmästä näkyvät hedelmätietosivulla. Tässä tapauksessa käytämme dynaamista reititystä.

Meillä olisi kaksi sivua – yksi esittelemään hedelmät luettelossa ja toinen näyttämään kunkin hedelmän tiedot. Tämä on "suunnitelma"-sivu, joka täytetään hedelmän tiedoilla. Luomme sivut Vue-kansioon ja lisäämme sitten reitit kansioon routes taulukko:

import FruitsPage from '../views/FruitsPage.vue';
import FruitDetails from '../views/FruitDetails.vue'; const routes = [ { path: '/fruits', name: 'Fruits', component: FruitsPage, }, { path: '/fruits/:id', name: 'FruitDetails', component: FruitDetails, },
];

Huomaamme sen FruitDetails sivulle lisäsimme dynaamisen id omaisuutta, jotta se saa id parametri ja käyttää sitä kyselläkseen tietystä tiedosta, joka näkyy sivulla käyttämällä $route.params mallissamme, mikä tekee reitistä dynaamisen.

In FruitsPage, oletetaan, että meillä on joukko hedelmiä, jotka yhdistämme sovellukseemme, voimme kääriä jokaisen hedelmän linkillä parametrien viereen seuraavasti:

<!-- FruitsPage.vue --> <template> <h1>Fruits page</h1> <div :key="fruit.id" v-for="fruit in fruits"> // dynamic linking by attaching the id as params <router-link :to="{ name: 'FruitDetails', params: { id: fruit.id } }"> <h3>{{ fruit.name }}</h3> </router-link> </div>
</template> <script> export default { data() { return { fruits: [ { id: 1, name: 'Apple', description: "Apples are an incredibly nutritious fruit.", }, { id: 2, name: 'Mango', description: 'A mango is an edible stone fruit produced by the tropical.', }, { id: 3, name: 'Banana', description: 'A banana is an elongated, edible fruit of the genus Musa.', }, ], }; }, };
</script>

Tässä vaiheessa, kun käyttäjä napsauttaa jokaista hedelmää, se vie heidät FruitDetails sivu, jolta pääsemme käsiksi id parametri ja käytä sitä tunnistamaan, minkä hedelmän tiedot tulee näyttää FruitDetails sivu.

Siirry reittiparametreihin

Tähän mennessä olemme nähneet, kuinka parametrit välitetään tietylle sivulle dynaamisesti. Katsotaanpa nyt, kuinka voimme käyttää tätä parametria FruitDetails sivu. Vuessa on kaksi tapaa päästä parametreihin - kautta $route.params tai rekvisiittaa käyttämällä:

Käyttäminen $route.params

Parametrit ovat suoraan käytettävissä $route.params:

<template> <h1>Fruit Details</h1> <p>This is fruit with the id of {{ $route.params.id }}</p>
</template>

Tai voimme käyttää sitä sisällämme data() menetelmä käyttäen this:

<template> <h1>Fruit Details</h1> <p>This is fruit with the id of {{ id }}</p>
</template> <script> export default { data() { return { id: this.$route.params.id, }; }, };
</script>

Vue Propsia käyttämällä

Toinen helppo tapa käyttää tietoja dynaamisesti reittien kautta on rekvisiitta. Meidän on ensin asetettava props että true reittien määritysobjektissa:

{ path: '/fruits/:id', name: 'FruitDetails', component: FruitDetails, props: true,
},

Tällä tavalla meidän ei tarvitse tehdä muuta kuin lisätä props vaihtoehto script -tagia ja käytä sitten meidän rekvisiittaa template tunnisteet:

<template> <h1>Fruit Details</h1> <p>This is fruit with the id of {{ id }}</p>
</template> <script> export default { props: ['id'], };
</script>

404 Virheet – Reittiä ei löydy

Jos käyttäjä navigoi olemattomalle reitille, Vue lataa sivun, mutta ilman komponentteja, jolloin syntyy tyhjä sivu. Tässä tapauksessa paras tapa on näyttää 404-sivu, jossa on ehkä painike, joka johtaa heidät etusivulle tai minne tahansa, johon uskomme heidän haluavan mennä.

Tämä on helppo hoitaa luomalla komponentti 404-sivullemme ja lisäämällä sitten 404-reitti reitittimen asetustiedostomme reittitaulukkoon, mutta tällä kertaa käytämme säännöllistä lauseketta saadaksemme kaikki reitit, joita ei ole aiemmin ilmoitettu:

{ path: '/:catchAll(.*)', name: 'ErrorPage', component: ErrorPage,
}

- :catchAll on dynaaminen segmentti, joka saa säännöllisen lausekkeen (.*) jossa Vue Router tarkistaa, onko käyttäjän navigoima reitti määritetty reitittimemme asetustiedostossa. Jos tällaisia ​​reittejä ei ole, käyttäjä ohjataan komponenttiin, joka tässä tapauksessa on ErrorPage komponentti:

<template> <h2>404 Page</h2> <p>This is a 404 page</p> <p>Visit home page <router-link to="/">here</router-link></p>
</template>

Ohjaukset

Tilanteessa, jossa haluamme, että käyttäjät ohjataan uudelleen, kun he vierailevat tietyllä reitillä, esimerkiksi jos meillä oli entinen reitti, jota emme enää käytä, haluamme, että käyttäjät ohjataan uudelle, kun he käyvät kyseisellä reitillä. Tämä on helppo saavuttaa lisäämällä uusi objekti reittien määritystaulukkoomme a redirect ala:

{ path: '/fruits', name: 'Fruits', component: FruitsPage,
},
{ path: '/all-frults', redirect: '/fruits',
},

Yllä oleva koodi tekee vain sen, että jos käyttäjä vierailee, polku /all-fruits, se ohjaisi heidät osoitteeseen /fruits reittiä.

Ohjelmallinen navigointi

Toistaiseksi olemme oppineet paljon reitityksestä, mutta haluat tietää vielä yhden asian: miten ohjelmallinen navigointi suoritetaan. Määrittelemme ohjelmoidun navigoinnin tilanteeksi, jossa käyttäjä uudelleenohjataan/ohjataan reitillä tapahtuvan tietyn toiminnon, kuten kirjautumis- tai kirjautumistoiminnon, perusteella tai napsauttamalla tiettyä painiketta, kuten "palaa takaisin" -painiketta.

Reitittimen historia

Voimme käyttää selainhistoriaa navigoidaksemme helposti taaksepäin tai eteenpäin mieltymystemme mukaan. Jos muistat, meillä on a createRouter() toiminto reitittimen määritystiedostossa, johon asetimme a history arvoa, jolloin Vue-reititin voi seurata reitittimen historiaa, kun reititämme verkkosovelluksen läpi.

Tämän avulla voimme käydä läpi selaimen historian ehdollisen ehdon, kuten painikkeen napsautuksen, perusteella:

<template> <h1>Fruit Details</h1> <p>This is fruit with the id of {{ id }}</p> <button @click="goBack">Go Back</button>
</template> <script> export default { props: ['id'], methods:{ goBack(){ this.$router.go(-1) } } };
</script>

Voimme myös päättää siirtyä eteenpäin käyttämällä 1 sijasta -1 ja oletetaan, että haluamme siirtyä 2 askelta, joita voimme käyttää jompaakumpaa 2 or -2.

Työnnä

push() käytetään yleensä toiminnon jälkeen ja lisää uuden merkinnän historiapinoon. Jos käyttäjä esimerkiksi kirjautuu sisään onnistuneesti, haluaisimme, että meidät ohjataan hallintapaneelisivulle ohjelmallisesti. Tämä saavutetaan sisällyttämällä push-menetelmä reitin nimen viereen:

this.$router.push({ name: 'Dashboard' });

Yhteenveto

Reititys on yksi Vuen ydintoiminnoista. Ellet ole rakentamassa a Yhden sivun sovellus (SPA), haluat yhdistää useita sivuja aloitussivulle, jotta käyttäjät voivat selata niitä.

Tässä oppaassa olemme tarkastelleet mitä reititys on ja kuinka voit asentaa sen vue-router uusissa ja olemassa olevissa projekteissa kuinka suorittaa laiska lataus, navigoida reittien välillä, suorittaa dynaaminen reititys, käyttää reittiparametreja ja suorittaa ohjelmallista navigointia.

• Coinsmart. Euroopan paras Bitcoin- ja kryptopörssi.
• Platoblockchain. Web3 Metaverse Intelligence. Tietoa laajennettu. VAPAA PÄÄSY.
• CryptoHawk. Altcoinin tutka. Ilmainen kokeilu.
• Lähde: https://stackabuse.com/guide-to-vue-router/