close

Routing och Navigation i Vue .js- En omfattande guide

Routing och Navigation är viktiga begrepp i Vue.js för att skapa sidor och navigera mellan dem i en webbapplikation. är ett kraftfullt och flexibelt bibliotek för att hantera systemet i .js. Vue Router routing Vue

 

Här är de grundläggande begreppen relaterade till route s i Vue.js:

  1. Route: A route definierar en sökväg och länkar den till en motsvarande komponent. Var och en route har en väg och en komponent.

  2. Vue Router: är ett bibliotek för att hantera s i .js. Den tillhandahåller verktyg för att definiera och hantera s i en applikation. Vue Router route Vue route Vue

  3. Route Komponent: Var och en route har en motsvarande komponent. När a route är aktiverad kommer den associerade komponenten att visas.

  4. Dynamisk Route: En dynamik route låter dig definiera route s med dynamiska parametrar. Till exempel kan du definiera en route med sökvägen "/user/:id" för att visa användarinformation med motsvarande id.

  5. Kapslad Route: En kapslad route är ett koncept som låter dig kapsla barn route inom en förälder route. Detta gör att du kan bygga komplexa route strukturer och organisera komponenter på ett kapslat sätt.

  6. Omdirigering Route: En omdirigering route låter dig omdirigera användare från en sökväg till en annan. Detta är användbart när du vill flytta route användare från en gammal sökväg till en ny.

  7. Route Vakt: En route vakt är en funktion som låter dig kontrollera och kontrollera åtkomst till route s. Genom att använda route vakter kan du definiera villkor för att förhindra användare från att komma åt vissa route s eller utföra speciell hantering före omdirigering.

 

För att använda kan du följa dessa steg: Vue Router

Steg 1: Installera med npm eller garn: Vue Router 

npm install vue-router

eller 

yarn add vue-router

Steg 2: Skapa en fil i projektets rotkatalog. I den här filen kommer vi att deklarera och konfigurera applikationens s. 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;

Steg 3: main.js Importera och länka den till applikationen 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');

Steg 4: I filen kan du deklarera s med hjälp av komponenter som, , och andra egenskaper. router.js route Vue Router path component

Du kan till exempel deklarera ett route för hemsidan och ett route för sidan om enligt följande:

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

Steg 5: I Vue komponenter kan du använda komponenter som att skapa länkar till andra s och för att visa innehållet i den aktuella. <router-link> route <router-view> route

Till exempel, i mallen för Home-komponenten, kan du använda för att skapa en länk till sidan Om: <router-link> 

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

I appkomponentens mall kan du använda för att visa innehållet i det aktuella: <router-view> route 

<router-view></router-view>

Med dessa steg har du ställt in och använt för att hantera och i din .js-applikation. Vue Router routing navigation Vue