Vue ruuteri juhend

Sissejuhatus

Veebirakenduste arendamisel Vue.js-iga, välja arvatud juhul, kui loote a Üheleheline rakendus (SPA), soovite sihtlehega ühendada mitu lehte, et kasutajad saaksid nendel liikuda. Seda tuntakse kui Marsruutimine.

Marsruutimine on protsess, mille käigus kasutaja navigeeritakse veebisaidi erinevatele lehtedele. Vue.js on JavaScripti raamistik, mida kasutatakse ühe lehe rakenduste loomiseks, mis tähendab, et see rakendus laaditakse serverist brauserisse ainult üks kord ja brauser ei pea marsruutimisel uuesti laadima; selle asemel küsib see lihtsalt neid lehti ja need laaditakse.

Sellest juhendist õpime, kuidas Vue.js-iga marsruutimist teha, ja sukeldume põhjalikult erinevatesse marsruutimise tüüpidesse, mida saab teha ja kuidas neid teha.

Alustamine

Vue.js-is marsruutimine on tehtud Vue ruuter, mis töötab koos Vue põhiteegiga, võimaldades meil seadistada marsruutimissüsteemi. Soovime kasutada vue-router meie projekti kahes stsenaariumis. Soovime ruuterit kasutada olemasolevas projektis või lisada selle uue projekti loomise ajal.

Vue ruuteri seadistamine olemasolevas projektis

Integreerimine vue-router võib olla tehniline ja me käsitleme neid üksikasju nüüd. Esimene samm oleks vue ruuteri paketi installimine järgmise käsu abil:

! npm install vue-router@4

Pärast installimist liikuge lehele src kaust ja looge kaust nimega router, millele järgneb fail nimega index.js aasta router kausta, mis toimib meie ruuteri konfiguratsioonifailina. Meie src kataloog näeb nüüd välja selline:

aasta index.js faili, kleepime alloleva koodi, mis on ruuteri konfiguratsioonikood:

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

Meil on routes massiiv, mis sisaldab ühte objekti, mis võib olla mitu objekti, kus iga objekt esindab ühte marsruuti. Esialgu lõime ainult selle, mis suunaks kodulehe komponendile.

Igaüks neist routes objektid koosneb tavaliselt path, mis on URL-i tee võrreldes saidi juurega name, mis toimib identifikaatorina, ja component, mille importisime lehe ülaosas.

Lisaks marsruudi massiivile seadistasime ruuteri eksemplari allosas, luues a createRouter() funktsiooni ja läbimine history põhiväärtused ja routes massiivi ja seejärel ekspordime router näiteks meie rakenduses kasutamiseks.

Selle ruuteri konfiguratsiooni kasutamiseks meie rakenduses avage main.js failil src kaust import router from "./router"ja seejärel lisage .use(router) vahel createApp(App) ja .mount('#app') täpselt nagu allpool:

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

see vue-router on meie rakenduses globaalselt konfigureeritud ja järgmine samm on selle kasutamine meie rakenduses. See on hõlpsasti saavutatav, kaasates <router-view /> jooksul App.js mallimärgend, mis renderdab ainult sobiva marsruudi:

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

Marsruutide seadistamine rakenduses Vue.js

Marsruudid luuakse tavaliselt router/index.js faili marsruutide massiivi ja need marsruudid ühenduvad komponentidega. Hea tava on luua vaadete kaust, kuhu salvestatakse kõik lehevaated. Näiteks:

Siinkohal teame nüüd, kuidas marsruute käsitsi seadistada.

Installige Vue ruuter Vue CLI-ga

Kui hakkame looma uut projekti ja usume, et kasutame ära vue-router, on seda lihtsam teha projekti loomise ajal.

Peame vaid kasutama Vue CLI-d, et installida uusim versioon vue-router meie projekti loomise protsessis funktsioone käsitsi valides:

Lugege meie kaudu Vue.js projekti loomise kohta lisateavet Vue CLI juhend!

Vue ruuteriga marsruutide laisk laadimine

Kui meie rakenduse suurus kasvab, suureneb ka kogumi suurus, mistõttu meie saidi laadimine võtab kauem aega. Saame kasutada vue-router laiska laadimise rakendamine, et vältida teatud marsruutide laadimist seni, kuni kasutaja seda konkreetselt nõuab.

Tavaliselt saavutatakse see ruuteri konfiguratsioonifailis, eemaldades faili import ülaosas olevat avaldust ja asendades selle dünaamilise impordi lausega meie marsruudi komponendivalikus:

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;

Marsruutide vahel navigeerimine rakendusega

Siiani oleme saanud marsruute luua, kuid kuidas me oma rakenduses navigeerime? Me kasutame <router-link> sildi asemel <a> HTML-i element marsruutimise käsitlemiseks.

Näiteks kui tahame luua oma rakenduse ülaossa navigeerimisriba, saame seda teha rakenduses App.js faili kohal <router-view/> märgistage, et seda näidataks kõigil marsruutidel:

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

Ruuteri link aktsepteerib to='path' atribuut, mis viib kasutaja marsruudi seadistamisel määratud komponendi teele. See toimib nagu href='path``' atribuut HTML-is.

Nimega marsruutide kasutamine

Nimega marsruutide kasutamine võimaldab meil läbida name võti, millel on juurdepääs name atribuut, mille seadsime marsruutide konfigureerimisel, selle asemel et kasutada teed, sidudes andmed järgmiselt:

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

Selle meetodi kasutamise üks eelis on see, et juhul, kui otsustame oma suurte rakenduste marsruudi teed muuta, ei pea me hakkama muutma kõiki linke, mis võib olla tülikas.

Dünaamiline marsruutimine

Võib tekkida olukordi, mis nõuavad dünaamilise marsruutimise kasutamist, et vältida lehe tarbetut kordamist. Oletame näiteks, et meil on puuviljade loend ja me tahame, et kasutaja saaks klõpsata konkreetsel puuviljal ja puuvilja üksikasjade lehel kuvatakse ainult selle puuvilja üksikasjad. Sel juhul kasutame dünaamilist marsruutimist.

Meil oleks kaks lehekülge – üks puuviljade esitlemiseks loendis ja teine ​​​​iga puuvilja üksikasjade kuvamiseks, mis on "plaani" leht, mis on täidetud puuvilja üksikasjadega. Loome lehed kausta Vue ja lisame seejärel marsruudid kausta routes massiiv:

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

Märkame, et FruitDetails lehele lisasime dünaamika id vara, nii et see saab id parameetrit ja kasutab seda sellel lehel kuvatavate konkreetsete andmete pärimiseks kasutades $route.params meie mallis, muutes marsruudi dünaamiliseks.

aasta FruitsPage, oletame, et meil on hulk puuvilju, mille me oma rakendusse ühendame, saame iga puuvilja parameetrite kõrval pakkida lingiga järgmiselt:

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

Sel hetkel, kui kasutaja klõpsab igal puuviljal, suunab see ta lehele FruitDetails leht, kust pääseme juurde id parameeter ja kasutage seda, et teha kindlaks, milliste puuviljade üksikasju tuleks kuvada FruitDetails lehel.

Juurdepääs marsruudi parameetritele

Siiani oleme näinud, kuidas parameetreid konkreetsele lehele dünaamiliselt edasi anda, vaatame nüüd, kuidas pääseme sellele parameetrile juurde FruitDetails lehel. Vue parameetritele pääseme juurde kahel viisil – kaudu $route.params või kasutades rekvisiite:

Kasutamine $route.params

Parameetrid on otse juurdepääsetavad $route.params:

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

Või pääseme sellele juurde oma sees data() meetodit kasutades 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 Propsi kasutamine

Teine lihtne viis andmetele marsruutide kaudu dünaamiliselt juurde pääsemiseks on rekvisiitide kasutamine. Kõigepealt peame paika panema props et true marsruudi konfiguratsiooniobjektis:

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

Sel viisil peame järgmiseks tegema vaid lisama props valikule script märkige ja seejärel kasutage meie rekvisiite template silt:

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

404 vead – marsruuti ei leitud

Juhul, kui kasutaja navigeerib olematule marsruudile, laadib Vue lehe, kuid ilma komponentideta, luues tühja lehe. Sel juhul on kõige parem kuvada 404 lehekülg koos nupuga, mis viib nad avalehele või kuhu iganes me usume, et nad tahaksid minna.

Seda on lihtne lahendada, luues meie 404 lehe jaoks komponendi ja lisades seejärel 404 marsruudi meie ruuteri konfiguratsioonifaili marsruutide massiivi, kuid seekord kasutame regulaaravaldist, et püüda kinni kõik marsruudid, mida pole varem deklareeritud:

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

. :catchAll on dünaamiline segment, mis saab regulaaravaldise (.*) milles Vue Router kontrollib, kas marsruut, kuhu kasutaja navigeerib, on määratletud meie ruuteri konfiguratsioonifailis. Kui selliseid marsruute pole, suunatakse kasutaja komponendi juurde, mis meie puhul on ErrorPage komponent:

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

Ümbersuunamised

Olukorras, kus soovime, et kasutajad suunataks konkreetse marsruudi külastamisel ümber, näiteks kui meil oli endine marsruut, mida me enam ei kasuta, soovime, et kasutajad suunataks seda marsruuti külastades ümber uuele. Seda on lihtne saavutada, lisades meie marsruutide konfiguratsiooni massiivi uue objekti koos a redirect väli:

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

Ülaltoodud kood teeb ainult seda, et kui kasutaja külastab, siis tee /all-fruits, suunaks see need ümber lehele /fruits liinil.

Programmiline navigeerimine

Siiani oleme marsruutimise kohta palju õppinud, kuid on veel üks asi, mida soovite teada: kuidas teha programmilist navigeerimist. Me defineerime programmilist navigeerimist kui olukorda, kus kasutaja suunatakse ümber/suunatakse marsruudil toimuva konkreetse toimingu (nt sisselogimis- või registreerumistoimingu) alusel või klõpsates konkreetsel nupul, näiteks „mine tagasi“.

Ruuteri ajalugu

Olenevalt eelistustest saame kasutada brauseri ajalugu, et hõlpsalt tagasi või edasi liikuda. Kui mäletate, on meil a createRouter() funktsioon ruuteri konfiguratsioonifailis, kus määrasime a history väärtust, võimaldades Vue ruuteril veebirakenduse kaudu marsruutimisel meie ruuteri ajalugu jälgida.

See võimaldab meil läbida brauseri ajalugu, tuginedes tingimusele, näiteks nupule klõpsamisele:

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

Samuti võime otsustada edasi liikuda, kasutades 1 asemel -1 ja oletame, et tahame liikuda 2 sammu võrra, mida saame kasutada kumbagi 2 or -2.

Lükkama

push() kasutatakse tavaliselt pärast toimingu toimumist ja lisab ajaloovirnasse uue kirje. Näiteks kui kasutaja logib edukalt sisse, soovime, et meid juhitaks programmiliselt armatuurlaua lehele. See saavutatakse, lisades marsruudi nime kõrvale tõukemeetodi:

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

Järeldus

Marsruutimine on üks Vue põhifunktsioone. Kui te just ei ehita a Üheleheline rakendus (SPA), soovite sihtlehega ühendada mitu lehte, et kasutajad saaksid nendel liikuda.

Selles juhendis oleme vaatlenud, mis on marsruutimine ja kuidas saate seda installida vue-router uutes ja olemasolevates projektides, kuidas teostada laiska laadimist, navigeerida marsruutide vahel, teostada dünaamilist marsruutimist, pääseda juurde marsruudi parameetritele ja teostada programmilist navigeerimist.

• Münditark. Euroopa parim Bitcoini ja krüptobörs.
• Platoblockchain. Web3 metaversiooni intelligentsus. Täiustatud teadmised. TASUTA PÄÄS.
• CryptoHawk. Altcoini radar. Tasuta prooviversioon.
• Allikas: https://stackabuse.com/guide-to-vue-router/