close

Routing og Navigation i Vue .js- En omfattende veiledning

Routing og Navigation er essensielle konsepter i Vue.js for å lage sider og navigere mellom dem i en nettapplikasjon. er et kraftig og fleksibelt bibliotek for å administrere systemet i .js. Vue Router routing Vue

 

Her er de grunnleggende konseptene knyttet til route s i Vue.js:

  1. Route: A route definerer en bane og kobler den til en tilsvarende komponent. Hver route har en vei og en komponent.

  2. Vue Router: er et bibliotek for å administrere s i .js. Den gir verktøy for å definere og administrere s i en applikasjon. Vue Router route Vue route Vue

  3. Route Komponent: Hver route har en tilsvarende komponent. Når a route er aktivert, vil den tilknyttede komponenten vises.

  4. Dynamisk Route: En dynamikk route lar deg definere route s med dynamiske parametere. For eksempel kan du definere en route med banen "/user/:id" for å vise brukerinformasjon med den tilsvarende id.

  5. Nested Route: Et nestet route er et konsept som lar deg neste barn route i en forelder route. Dette lar deg bygge komplekse route strukturer og organisere komponenter på en nestet måte.

  6. Omdirigering Route: En omdirigering route lar deg omdirigere brukere fra en sti til en annen. Dette er nyttig når du vil flytte route brukere fra en gammel bane til en ny.

  7. Route Vakt: En route vakt er en funksjon som lar deg kontrollere og kontrollere tilgang til route s. Ved å bruke route vakter kan du definere betingelser for å hindre brukere i å få tilgang til visse route s eller utføre spesiell håndtering før omdirigering.

 

For å bruke kan du følge disse trinnene: Vue Router

Trinn 1: Installer med npm eller garn: Vue Router 

npm install vue-router

eller 

yarn add vue-router

Trinn 2: Lag en fil i prosjektets rotkatalog. I denne filen vil vi deklarere og konfigurere applikasjonen. 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;

Trinn 3: main.js Importer og koble den til applikasjonen i filen: 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');

Trinn 4: I filen kan du deklarere s ved å bruke komponenter som, , og andre egenskaper. router.js route Vue Router path component

For eksempel kan du deklarere en route for hjemmesiden og en route for Om-siden som følger:

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

Trinn 5: I Vue komponenter kan du bruke komponenter som å lage lenker til andre s, og for å vise innholdet i gjeldende. <router-link> route <router-view> route

For eksempel, i malen til Home-komponenten, kan du bruke til å lage en lenke til Om-siden: <router-link> 

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

I malen til app-komponenten kan du bruke til å vise innholdet i gjeldende: <router-view> route 

<router-view></router-view>

Med disse trinnene har du satt opp og brukt til å administrere og i .js-applikasjonen din. Vue Router routing navigation Vue