Vue.js Router

Vue.js este un cadru javascript reactiv, care este folosit pentru a construi UI (interfețe utilizator) și SPA-uri (aplicații cu o singură pagină), iar dezvoltatorilor le place să codifice și să simtă libertatea și confortul în timp ce dezvoltă aplicații în Vue.js. În scopuri de rutare, Vue.js nu oferă funcția de rutare încorporată. Dar există o bibliotecă oficială terță parte cu numele Vue Router pentru furnizarea acestei caracteristici. Prin utilizarea acestei funcții putem naviga între paginile web, dar fără a reîncărca. Deci, în acest articol, vom vedea cum putem instala și utiliza Vue Router în Vue.js.

Instalare

Putem instala routerul Vue într-un Vue existent.js, executând următoarea comandă în terminal

npm instalați Vue-router

După o instalare reușită, trebuie să importăm VueRouter în principal.js din directorul src folosind de asemenea sintaxa următoare

import Vue din „vue”
import router de la './ router '
Vue.folosi (router)

După importarea routerului, ești bine să mergi și să folosești vue-router în proiectul tău.

Dar dacă instalați Vue.js folosind Vue CLI. Nu veți avea nevoie de acest pas suplimentar de instalare. Puteți adăuga un plugin vue-router în timpul selectării unei presetări.

Utilizare

Utilizarea vue-router este foarte simplă și ușor de utilizat. Mai întâi, în șablon sau HTML

În acest exemplu destul de simplu și clar de vue-router. Am creat o navigație simplă folosind componentele router-link și oferim linkul folosind prop-ul numit „către”. Router-link-ul funcționează la fel ca o etichetă de ancorare „a”. De fapt, este redat ca etichetă „a” în mod implicit. În vizualizarea routerului, vom avea componenta relativă care se potrivește cu ruta.

În javascript, trebuie mai întâi să înregistrăm și să importăm componentele pentru a le defini traseele. Presupunem că avem o componentă numită Comp.vue în directorul de vizualizări în care vom importa în indexul routerului.js în directorul routerului și definiți-l ca o rută.

Pentru a importa o componentă, folosim următoarea declarație

import Comp din „… / views / Comp.vue ";

După import, trebuie să definim ruta acum și să o mapăm la componentă. Ca aceasta,

rute const = [

cale: "/",
nume: "Comp",
componentă: Comp

];

Putem da și rute multiple, separate printr-o virgulă. Ca aceasta,

rute const = [

cale: "/",
nume: "Comp",
componentă: Comp
,

cale: "/ comp2",
nume: „Comp2”,
componentă: Comp2

];

După definirea traseelor. Treceți matricea de rute către instanțele routerului. Deci, să creăm și instanța routerului

const router = createRouter (
rute // scurt pentru „rute: rute”
);

În cele din urmă, în principal.js. Trebuie să creăm instanța rădăcină și să o montăm și să injectăm rutele în ea, astfel încât întreaga aplicație să devină conștientă de rute.

createApp (App)
.folosi (router)
.mount („# app”);

Prin utilizarea acestei tehnici de injecție. Putem accesa routerul în orice componentă, folosind acest.$ router.

Acum putem să împingem rute programate printr-un clic pe un buton sau orice vrei, în loc să folosim componenta router-link. De exemplu,

metode:
clickFunc ()
acest.$ router.împinge ('/ despre')

Încheierea și rezumatul

În acest articol, am învățat să instalăm router-ul Vue utilizând diferite moduri și am învățat să folosim router-ul Vue programat în javascript și în Vue.șablonul lui js. De asemenea, am învățat să configurăm Vue Router într-un proiect existent într-un ghid detaliat foarte ușor și pas cu pas. Dacă doriți să aflați mai multe despre Vue Router, vă rugăm să vizitați Vue Router: Documente oficiale.