Vodnik po usmerjevalniku Vue

Predstavitev

Ko razvijate spletne aplikacije z Vue.js, razen če gradite a Prijava na eno stran (SPA), boste želeli več strani povezati s ciljno stranjo, da boste uporabnikom omogočili krmarjenje po njih. To je znano kot usmerjanje.

Usmerjanje je postopek, s katerim je uporabnik navigiran na različne strani na spletnem mestu. Vue.js je ogrodje JavaScript, ki se uporablja za ustvarjanje enostranskih aplikacij, kar pomeni, da se ta aplikacija samo enkrat naloži s strežnika v brskalnik in brskalniku pri usmerjanju ni treba znova naložiti; namesto tega preprosto zahteva te strani in se naložijo.

V tem priročniku se bomo naučili, kako narediti usmerjanje z Vue.js in se poglobili v različne vrste usmerjanja, ki jih je mogoče izvesti, in kako jih je mogoče narediti.

Začetek

Usmerjanje v Vue.js se izvaja z Vue usmerjevalnik, ki deluje v tandemu z osnovno knjižnico Vue in nam omogoča vzpostavitev sistema usmerjanja. Radi bi uporabili vue-router v dveh scenarijih v našem projektu. Usmerjevalnik želimo bodisi uporabiti v obstoječem projektu ali pa ga dodati med ustvarjanjem novega projekta.

Nastavite usmerjevalnik Vue v obstoječem projektu

Povezovanje vue-router v obstoječi projekt je lahko tehnično, zato bomo te podrobnosti pregledali zdaj. Prvi korak bi bila namestitev paketa usmerjevalnika vue z naslednjim ukazom:

! npm install vue-router@4

Ko je nameščen, se pomaknite do src in ustvarite mapo z imenom router, ki ji sledi datoteka z imenom index.js v router mapo, ki bo služila kot konfiguracijska datoteka našega usmerjevalnika. Naš src imenik bo zdaj videti takole:

v index.js zagotovimo, da prilepimo spodnjo kodo, ki je konfiguracijska koda usmerjevalnika:

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

Imamo routes matriko, ki vsebuje en sam objekt, ki je lahko več objektov, kjer vsak objekt predstavlja eno pot. Zaenkrat smo ustvarili le tisto, ki bo preusmerjala na komponento domače strani.

Vsak od teh routes predmeti so običajno sestavljeni iz path, ki je url pot glede na koren mesta, the name, ki služi kot identifikator, in component, ki smo ga uvozili na vrhu strani.

Poleg matrike poti na dnu nastavimo primerek usmerjevalnika, tako da ustvarimo a createRouter() funkcijo in predajo v history ključne vrednote in routes matriko, nato pa izvozimo router primerek za uporabo znotraj naše aplikacije.

Če želite uporabiti to konfiguracijo usmerjevalnika v naši aplikaciji, odprite main.js datoteko v src mapo, import router from "./router"in nato dodajte .use(router) med createApp(App) in .mount('#app') tako kot je spodaj:

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

Ta vue-router je globalno konfiguriran v naši aplikaciji, naslednji korak pa je uporaba v naši aplikaciji. To je enostavno doseči z vključitvijo <router-view /> znotraj App.js oznaka predloge, ki upodobi samo ujemajočo se pot:

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

Nastavitev poti v Vue.js

Poti so običajno ustvarjene v router/index.js matriko poti datoteke in te poti se povezujejo s komponentami. Priporočljivo je ustvariti mapo s pogledi, v kateri bodo shranjeni vsi ogledi strani. Na primer:

Na tej točki zdaj vemo, kako ročno nastaviti poti.

Namestite Vue Router z Vue CLI

Če nameravamo ustvariti nov projekt in verjamemo, da ga bomo izkoristili vue-router, je to lažje narediti med ustvarjanjem projekta.

Vse kar moramo storiti je, da uporabimo Vue CLI za namestitev najnovejše različice vue-router med ročnim izbiranjem funkcij v procesu ustvarjanja našega projekta:

Preberite in izvedite več o ustvarjanju projekta Vue.js prek našega Vodnik po Vue CLI!

Leno nalaganje poti z usmerjevalnikom Vue

Ko naša aplikacija raste v velikosti, se povečuje tudi velikost paketa, zaradi česar se naše spletno mesto nalaga dlje. Lahko uporabimo vue-router za implementacijo lenega nalaganja, da se izognete nalaganju določenih poti, dokler jih uporabnik posebej ne zahteva.

To se običajno doseže v konfiguracijski datoteki usmerjevalnika z odstranitvijo import stavek na vrhu in ga nadomestimo z dinamičnim uvoznim stavkom v možnosti komponente naše poti:

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;

Navigacija med potmi z

Doslej smo lahko ustvarjali poti, toda kako navigiramo znotraj naše aplikacije? Uporabljamo <router-link> namesto oznake <a> element v HTML za upravljanje z usmerjanjem.

Na primer, če želimo ustvariti navigacijsko vrstico na vrhu naše aplikacije, lahko to storimo v App.js datoteka nad <router-view/> oznako, tako da je prikazana na vseh poteh:

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

Povezava usmerjevalnika sprejema to='path' atribut, ki uporabnika popelje na pot komponente, kot je bila nastavljena pri konfiguraciji poti. To deluje kot href='path``' atribut v HTML.

Uporaba imenovanih poti

Uporaba imenovanih poti nam omogoča prehod v name ključ, ki ima dostop do name lastnost, ki smo jo nastavili med konfiguriranjem poti namesto uporabe poti s povezovanjem podatkov na ta način:

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

One advantage of using this method is in case we decide to change the route path for our large applications, we don’t need to start changing all links path which could be cumbersome.

Dinamično usmerjanje

Lahko pride do situacij, ki zahtevajo uporabo dinamičnega usmerjanja, da se izognete nepotrebnemu ponavljanju strani. Denimo, da imamo seznam sadja in želimo, da lahko uporabnik klikne na določeno sadje, na strani s podrobnostmi o sadju pa so prikazane samo podrobnosti o tem sadju. V tem primeru uporabljamo dinamično usmerjanje.

Imeli bi dve strani – eno za predstavitev sadja na seznamu in eno za prikaz podrobnosti vsakega sadja, ki je stran z »načrtom«, ki jo je treba zapolniti s podrobnostmi o sadju. Ustvarili bomo strani v mapi Vue in nato dodali poti v mapo routes niz:

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

Opazili bomo, da za FruitDetails strani smo dodali dinamiko id lastnino, tako da dobi id parameter in ga uporabi za poizvedbo po določenih podatkih, ki so prikazani na tej strani z uporabo $route.params v naši predlogi, s čimer postane pot dinamična.

v FruitsPage, predpostavimo, da imamo niz sadja, ki ga zankamo v našo aplikacijo, lahko vsako sadje zavijemo s povezavo poleg paramov na ta način:

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

Na tej točki, ko uporabnik klikne posamezno sadje, ga odpelje na FruitDetails strani, kjer lahko dostopamo do id in ga uporabite za identifikacijo podrobnosti o sadju, ki naj bodo prikazane v FruitDetails stran.

Dostop do parametrov poti

Doslej smo videli, kako dinamično posredovati parametre na določeno stran, poglejmo zdaj, kako lahko dostopamo do tega parama v našem FruitDetails strani. Do parametrov v Vue lahko dostopamo na dva načina – prek $route.params ali uporaba rekvizitov:

Uporaba $route.params

Parametri so neposredno dostopni prek $route.params:

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

Lahko pa do njega dostopamo znotraj našega data() metoda z uporabo 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>

Uporaba Vue Props

Druga preprosta metoda za dinamičen dostop do podatkov prek poti je uporaba rekvizitov. Najprej moramo nastaviti props do true v objektu konfiguracije poti:

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

Na ta način je vse, kar moramo narediti, dodajanje props možnost do script oznako in nato uporabite rekvizite znotraj našega template oznaka:

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

Napake 404 – Ni najdene poti

V primeru, da uporabnik navigira do neobstoječe poti, bo Vue naložil stran, vendar brez komponent, in ustvaril prazno stran. V tem primeru je najbolje, da prikažete stran 404 z morda gumbom, ki jih vodi na domačo stran ali kamor koli, kamor verjamemo, da bi radi šli.

To zlahka rešimo tako, da ustvarimo komponento za našo stran 404 in nato dodamo pot 404 v matriko poti konfiguracijske datoteke usmerjevalnika, toda tokrat bomo uporabili regularni izraz za zajemanje vseh poti, ki še niso bile deklarirane:

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

O :catchAll je dinamični segment, ki prejme regularni izraz (.*) v katerem Vue Router preverja, ali je pot, do katere uporabnik navigira, definirana v konfiguracijski datoteki našega usmerjevalnika. Če takšne poti ne obstajajo, je uporabnik usmerjen na komponento, ki je v našem primeru ErrorPage komponenta:

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

Preusmeritev

V situaciji, ko želimo, da so uporabniki preusmerjeni, ko obiščejo določeno pot, na primer, če smo imeli prejšnjo pot, ki je ne uporabljamo več, želimo, da so uporabniki preusmerjeni na novo, ko obiščejo to pot. To enostavno dosežemo z dodajanjem novega objekta v naše konfiguracijsko polje poti z a redirect polje:

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

Vse, kar naredi zgornja koda, je, da če uporabnik obišče, pot /all-fruits, bi jih preusmeril na /fruits poti.

Programska navigacija

Doslej smo se veliko naučili o usmerjanju, a obstaja še ena stvar, ki jo boste želeli vedeti: kako izvajati programsko navigacijo. Programsko navigacijo definiramo kot situacijo, v kateri je uporabnik preusmerjen/usmerjen na podlagi določenega dejanja, ki se zgodi na poti, kot je dejanje prijave ali registracije, ali s klikom na določen gumb, kot je gumb »pojdi nazaj«.

Zgodovina usmerjevalnika

Zgodovino brskalnika lahko uporabimo za preprosto krmarjenje nazaj ali naprej, odvisno od naših preferenc. Če se spomnite, imamo a createRouter() funkcijo v konfiguracijski datoteki usmerjevalnika, kjer smo nastavili a history vrednost, kar usmerjevalniku Vue omogoča, da spremlja zgodovino našega usmerjevalnika, ko potujemo skozi spletno aplikacijo.

To nam omogoča pregledovanje zgodovine brskalnika na podlagi pogojnika, kot je klik na gumb:

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

Lahko se tudi odločimo, da gremo naprej z uporabo 1 Namesto -1 in predpostavimo, da se želimo premakniti za 2 koraka, ki ju lahko uporabimo 2 or -2.

Push

push() se običajno uporablja po izvedbi dejanja in doda nov vnos v sklad zgodovine. Na primer, če se uporabnik uspešno prijavi, želimo, da nas programsko preusmeri na stran nadzorne plošče. To se doseže tako, da poleg imena poti vključite metodo potiskanja:

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

zaključek

Usmerjanje je ena od osrednjih funkcij Vue. Razen če gradite a Prijava na eno stran (SPA), boste želeli več strani povezati s ciljno stranjo, da boste uporabnikom omogočili krmarjenje po njih.

V tem priročniku smo si ogledali, kaj je usmerjanje, kako lahko namestite vue-router v novih in obstoječih projektih, kako izvajati leno nalaganje, krmariti med potmi, izvajati dinamično usmerjanje, dostopati do parametrov poti in izvajati programsko navigacijo.

• Coinsmart. Najboljša evropska borza bitcoinov in kriptovalut.
• Platoblockchain. Web3 Metaverse Intelligence. Razširjeno znanje. PROST DOSTOP.
• CryptoHawk. Altcoin radar. Brezplačen preizkus.
• Source: https://stackabuse.com/guide-to-vue-router/