Cum să gestionați rutarea în Vue cu Router-ul Vue

Vue Router, routerul oficial pentru Vue, face posibilă construirea de aplicații cu o singură pagină (SPA) în Vue. Vue Router vă permite să mapați componentele aplicației dvs. web pe diferite rute ale browserului, să gestionați istoricul aplicației și să configurați opțiuni avansate de rutare.

Noțiuni introductive cu routerul Vue

Pentru a începe cu Vue Router, rulați următoarele npm (Manager de pachete de noduri) comandă în directorul dvs. preferat pentru a vă crea aplicația Vue:

npm create vue 

Când vi se solicită dacă să adăugați Vue Router pentru Aplicație de o singură pagină dezvoltare, selectați da.

Apoi, deschideți proiectul în editorul de text preferat. Aplicația dvs src directorul ar trebui să includă a router pliant.

The router folderul case an index.js fișier care conține codul JavaScript pentru gestionarea rutelor în aplicația dvs. The index.js fișierul importă două funcții din vue-router pachet: createRouter și createWebHistory.

The createRouter funcția creează o nouă configurație de rută dintr-un obiect. Acest obiect conține istorie și trasee cheile și valorile acestora. The trasee cheia este o serie de obiecte care detaliază configurația fiecărei rute, așa cum se vede în imaginea de mai sus.

După configurarea rutelor, trebuie să exportați acest lucru router instanță și importați această instanță în fișierul main.js fişier:

import'./assets/main.css'
import { createApp } from'vue'
import App from'./App.vue'
import router from'./router'
const app = createApp(App)
app.use(router)
app.mount('#app')

Ai importat router funcția în main.js fișier și apoi a făcut ca aplicația Vue să folosească această funcție de router cu utilizare metodă.

Apoi, puteți aplica rutele în aplicația Vue prin structurarea unui bloc de cod similar celui de mai jos: