close

Routing és .js- Navigation ben Vue – Átfogó útmutató

Routing és Navigation alapvető fogalmak Vue a .js-ben az oldalak létrehozásához és a webalkalmazásokban történő navigáláshoz. egy hatékony és rugalmas könyvtár a rendszer .js formátumban történő kezelésére. Vue Router routing Vue

 

route Íme a .js -ben lévő s-hez kapcsolódó alapvető fogalmak Vue:

  1. Route: A route meghatároz egy elérési utat, és összekapcsolja a megfelelő összetevővel. Mindegyiknek route van útvonala és összetevője.

  2. Vue Router: egy könyvtár az s .js-ben történő kezeléséhez. Eszközöket biztosít az alkalmazásokban lévő s meghatározásához és kezeléséhez. Vue Router route Vue route Vue

  3. Route Komponens: Mindegyik route rendelkezik egy megfelelő összetevővel. Ha az a route aktiválva van, megjelenik a kapcsolódó összetevő.

  4. Dinamikus Route: A dinamikus lehetővé teszi, hogy dinamikus paraméterekkel route határozzon meg s-t. route Például megadhat egy route a "/user/:id" elérési úttal, hogy megjelenítse a felhasználói információkat a megfelelő azonosítóval.

  5. Beágyazott Route: A beágyazott route egy olyan fogalom, amely lehetővé teszi, hogy a gyermeket route egy szülőbe ágyazza be route. Ez lehetővé teszi összetett struktúrák felépítését route és az összetevők egymásba ágyazott rendszerezését.

  6. Átirányítás Route: Az átirányítás route lehetővé teszi a felhasználók átirányítását egyik útvonalról a másikra. route Ez akkor hasznos, ha a felhasználókat egy régi útvonalról egy újra szeretné irányítani .

  7. Route Őr: Az route őr egy olyan funkció, amely lehetővé teszi az s-hez való hozzáférés ellenőrzését és szabályozását route. Az őrök használatával route olyan feltételeket határozhat meg, amelyek megakadályozzák, hogy a felhasználók hozzáférjenek bizonyos route s-ekhez, vagy speciális kezelést hajtsanak végre az átirányítás előtt.

 

A használatához kövesse az alábbi lépéseket: Vue Router

1. lépés: Telepítés npm vagy fonal használatával: Vue Router 

npm install vue-router

vagy 

yarn add vue-router

2. lépés: Hozzon létre egy fájlt a projekt gyökérkönyvtárában. Ebben a fájlban deklaráljuk és konfiguráljuk az alkalmazás s-eit. router.js route 

import Vue from 'vue';  
import VueRouter from 'vue-router';  
  
Vue.use(VueRouter);  
  
const router = new VueRouter({
  routes: [  
    // Declare routes here  
  ]  
});  
  
export default router;

3. lépés: A fájlban main.js importálja és csatolja az alkalmazáshoz: Vue Router Vue 

import Vue from 'vue';  
import App from './App.vue';  
import router from './router';  
  
new Vue({
  router,  
  render: h => h(App),  
}).$mount('#app');

4. lépés: A fájlban deklarálhatja az s-t olyan összetevők használatával, mint a, és egyéb tulajdonságok. router.js route Vue Router path component

Például deklarálhat a-t route a kezdőlaphoz és a-t route a névjegyoldalhoz a következőképpen:

import Home from './components/Home.vue';  
import About from './components/About.vue';  
  
const router = new VueRouter({
  routes: [  
    { path: '/', component: Home },  
    { path: '/about', component: About }  
  ]  
});

5. lépés: Az összetevőkben Vue olyan összetevőket használhat, mint például hivatkozások létrehozása másokhoz, és az aktuális tartalom megjelenítése. <router-link> route <router-view> route

Például a Kezdőlap összetevő sablonjában létrehozhat egy hivatkozást a névjegyoldalra: <router-link> 

<router-link to="/about">Go to About</router-link>

Az App komponens sablonjában az aktuális tartalom megjelenítésére használhatja: <router-view> route 

<router-view></router-view>

Ezekkel a lépésekkel beállította és kezelheti a .js alkalmazást. Vue Router routing navigation Vue