close

Routing en Navigation in Vue .js- Een uitgebreide gids

Routing en Navigation zijn essentiële concepten in Vue.js voor het maken van pagina's en het navigeren ertussen in een webtoepassing. is een krachtige en flexibele bibliotheek voor het beheer van het systeem in .js. Vue Router routing Vue

 

Hier zijn de fundamentele concepten met betrekking tot route s in Vue.js:

  1. Route: A route definieert een pad en koppelt dit aan een overeenkomstig onderdeel. Elk route heeft een pad en een component.

  2. Vue Router: is een bibliotheek voor het beheren van s in .js. Het biedt hulpmiddelen om programma's in een toepassing te definiëren en te beheren. Vue Router route Vue route Vue

  3. Route Component: Elk route heeft een overeenkomstige component. Als a route is geactiveerd, wordt de bijbehorende component weergegeven.

  4. Dynamisch Route: met een dynamiek route kunt u s definiëren route met dynamische parameters. U kunt bijvoorbeeld een route met het pad "/user/:id" definiëren om gebruikersinformatie met de overeenkomstige id weer te geven.

  5. Genest Route: Een genest is een concept waarmee u onderliggende items binnen een ouder route kunt nesten. Dit stelt u in staat om complexe structuren te bouwen en componenten genest te ordenen. route route route

  6. Omleiding Route: Met een omleiding route kunt u gebruikers van het ene pad naar het andere omleiden. Dit is handig wanneer u route gebruikers van een oud pad naar een nieuw pad wilt leiden.

  7. Route Bewaker: Een route bewaker is een functie waarmee u de toegang tot s kunt controleren en controleren route. Door route bewakers te gebruiken, kunt u voorwaarden definiëren om te voorkomen dat gebruikers toegang krijgen tot bepaalde route programma's of om speciale handelingen uit te voeren voordat ze worden omgeleid.

 

Om te gebruiken, kunt u deze stappen volgen: Vue Router

Stap 1: Installeer met behulp van npm of garen: Vue Router 

npm install vue-router

of 

yarn add vue-router

Stap 2: Maak een bestand aan in de hoofdmap van het project. In dit bestand zullen we de programma's van de applicatie declareren en configureren. 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;

Stap 3: Importeer het main.js bestand en koppel het aan de applicatie: 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');

Stap 4: In het bestand kunt u s declareren met behulp van componenten zoals, , en andere eigenschappen. router.js route Vue Router path component

route U kunt bijvoorbeeld als volgt een voor de startpagina en een route voor de over-pagina declareren:

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

Stap 5: In Vue componenten kunt u componenten gebruiken om koppelingen naar andere s te maken en om de inhoud van het huidige. <router-link> route <router-view> route

In het sjabloon van de Home-component kunt u bijvoorbeeld gebruiken om een ​​link naar de about-pagina te maken: <router-link> 

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

In de sjabloon van de app-component kunt u gebruiken om de inhoud van de huidige weer te geven: <router-view> route 

<router-view></router-view>

Met deze stappen heeft u uw .js-applicatie ingesteld en gebruikt om deze te beheren en in te stellen. Vue Router routing navigation Vue