Állítson be egy robusztus útválasztó rendszert a Vue alkalmazáshoz a Vue Router segítségével.

A Vue Router, a Vue hivatalos útválasztója lehetővé teszi egyoldalas alkalmazások (SPA-k) építését a Vue-ban. A Vue Router lehetővé teszi a webalkalmazás összetevőinek különböző böngészőútvonalakhoz való hozzárendelését, az alkalmazás előzménykészletének kezelését, és speciális útválasztási beállítások megadását.

Kezdő lépések a Vue Routerrel

A Vue Router használatának megkezdéséhez futtassa a következőt npm (Node Package Manager) parancsot a kívánt könyvtárban a Vue alkalmazás létrehozásához:

npm create vue

Amikor a rendszer megkérdezi, hogy kell-e hozzáadni a Vue Routert a következőhöz Egyoldalas alkalmazás fejlesztés, válassz Igen.

Ezután nyissa meg a projektet a kívánt szövegszerkesztőben. Az alkalmazásod src a könyvtárnak tartalmaznia kell a router mappát.

A router mappa házak an index.js fájl, amely tartalmazza az alkalmazásban lévő útvonalak kezeléséhez szükséges JavaScript kódot. A index.js fájl két függvényt importál a vue-router csomag: CreateRouter és CreateWebHistory.

instagram viewer

A CreateRouter függvény új útvonal-konfigurációt hoz létre egy objektumból. Ez az objektum tartalmazza a történelem és útvonalak kulcsok és értékeik. A útvonalak A kulcs az egyes útvonalak konfigurációját részletező objektumok tömbje, amint az a fenti képen látható.

Az útvonalak konfigurálása után ezt exportálnia kell router példányt, és importálja ezt a példányt a main.js fájl:

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

Ön importálta a router funkciót a main.js fájlt, majd a Vue alkalmazást ezt az útválasztó funkciót a használat módszer.

Ezután az alábbihoz hasonló kódblokkot strukturálva alkalmazhatja az útvonalakat a Vue alkalmazásban: