close

Routing a Navigation v Vue .js – komplexní průvodce

Routing a Navigation jsou základními pojmy v Vue.js pro vytváření stránek a navigaci mezi nimi ve webové aplikaci. je výkonná a flexibilní knihovna pro správu systému v .js. Vue Router routing Vue

 

Zde jsou základní pojmy související s route s v Vue.js:

  1. Route: A route definuje cestu a spojuje ji s odpovídající komponentou. Každý route má cestu a komponentu.

  2. Vue Router: je knihovna pro správu s v .js. Poskytuje nástroje pro definování a správu s v aplikaci. Vue Router route Vue route Vue

  3. Route Komponenta: Každá route má odpovídající komponentu. Když route je aktivováno a, zobrazí se přidružená součást.

  4. Dynamický Route: Dynamický route umožňuje definovat route s s dynamickými parametry. Můžete například definovat a route s cestou "/user/:id" pro zobrazení informací o uživateli s odpovídajícím id.

  5. Vnořený Route: Vnořený route je koncept, který vám umožňuje vnořovat potomky route do rodiče route. To vám umožní vytvářet složité route struktury a organizovat komponenty vnořeným způsobem.

  6. Přesměrování Route: Přesměrování route umožňuje přesměrovat uživatele z jedné cesty na druhou. To je užitečné, když chcete route uživatele ze staré cesty na novou.

  7. Route Stráž: route Stráž je funkce, která vám umožňuje kontrolovat a kontrolovat přístup k route s. Pomocí route strážců můžete definovat podmínky, které uživatelům zabrání v přístupu k určitým route s nebo provést speciální manipulaci před přesměrováním.

 

Chcete-li použít, můžete postupovat takto: Vue Router

Krok 1: Instalace pomocí npm nebo příze: Vue Router 

npm install vue-router

nebo 

yarn add vue-router

Krok 2: Vytvořte soubor v kořenovém adresáři projektu. V tomto souboru budeme deklarovat a konfigurovat s aplikace. 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;

Krok 3: main.js Importujte soubor a propojte jej s aplikací: 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');

Krok 4: V souboru můžete deklarovat s pomocí komponent jako, , a dalších vlastností. router.js route Vue Router path component

Můžete například deklarovat a route pro domovskou stránku a a route pro stránku informací následovně:

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

Krok 5: V Vue komponentách můžete použít komponenty, jako je vytváření odkazů na jiné s a zobrazení obsahu aktuálního souboru. <router-link> route <router-view> route

Například v šabloně komponenty Home můžete použít k vytvoření odkazu na stránku o: <router-link> 

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

V šabloně komponenty App můžete použít k zobrazení obsahu aktuálního: <router-view> route 

<router-view></router-view>

Pomocí těchto kroků jste nastavili a používali ke správě a ve své aplikaci .js. Vue Router routing navigation Vue