close

Routing og Navigation i Vue .js- A Comprehensive Guide

Routing og Navigation er væsentlige begreber i Vue.js til at skabe sider og navigere mellem dem i en webapplikation. er et kraftfuldt og fleksibelt bibliotek til styring af systemet i .js. Vue Router routing Vue

 

Her er de grundlæggende begreber relateret til route s i Vue.js:

  1. Route: A route definerer en sti og linker den til en tilsvarende komponent. Hver route har en sti og en komponent.

  2. Vue Router: er et bibliotek til at administrere s i .js. Det giver værktøjer til at definere og administrere s i en applikation. Vue Router route Vue route Vue

  3. Route Komponent: Hver route har en tilsvarende komponent. Når a route er aktiveret, vil den tilknyttede komponent blive vist.

  4. Dynamisk Route: En dynamik route giver dig mulighed for at definere route s med dynamiske parametre. For eksempel kan du definere en route med stien "/user/:id" for at vise brugeroplysninger med det tilsvarende id.

  5. Indlejret Route: Et indlejret route er et koncept, der giver dig mulighed for at indlejre børn route i en forælder route. Dette giver dig mulighed for at bygge komplekse route strukturer og organisere komponenter på en indlejret måde.

  6. Omdirigering Route: En omdirigering route giver dig mulighed for at omdirigere brugere fra en sti til en anden. Dette er nyttigt, når du vil lede route brugere fra en gammel sti til en ny.

  7. Route Vagt: En route vagt er en funktion, der giver dig mulighed for at kontrollere og kontrollere adgangen til route s. Ved at bruge route vagter kan du definere betingelser for at forhindre brugere i at få adgang til bestemte route s eller udføre speciel håndtering før omdirigering.

 

For at bruge kan du følge disse trin: Vue Router

Trin 1: Installer ved hjælp af npm eller garn: Vue Router 

npm install vue-router

eller 

yarn add vue-router

Trin 2: Opret en fil i projektets rodmappe. I denne fil vil vi erklære og konfigurere 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;

Trin 3: main.js Importer og link den til 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');

Trin 4: I filen kan du erklære s ved hjælp af komponenter som, , og andre egenskaber. router.js route Vue Router path component

Du kan f.eks. angive et route for startsiden og et route for siden om 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 }  
  ]  
});

Trin 5: I Vue komponenter kan du bruge komponenter som at oprette links til andre s og til at vise indholdet af den aktuelle. <router-link> route <router-view> route

For eksempel, i skabelonen for Home-komponenten, kan du bruge til at oprette et link til siden om: <router-link> 

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

I app-komponentens skabelon kan du bruge til at vise indholdet af det aktuelle: <router-view> route 

<router-view></router-view>

Med disse trin har du konfigureret og brugt til at administrere og i din .js-applikation. Vue Router routing navigation Vue