close

Routing ir Navigation .js Vue – išsamus vadovas

Routing ir Navigation yra esminės Vue.js sąvokos kuriant puslapius ir naršant tarp jų žiniatinklio programoje. yra galinga ir lanksti biblioteka, skirta valdyti sistemą .js formatu. Vue Router routing Vue

 

Štai pagrindinės sąvokos, susijusios su route s .js formatu Vue:

  1. Route: A route apibrėžia kelią ir susieja jį su atitinkamu komponentu. Kiekvienas route turi kelią ir komponentą.

  2. Vue Router: yra biblioteka, skirta .js formatu valdyti. Jame pateikiami įrankiai, skirti apibrėžti ir valdyti programoje esančius parametrus. Vue Router route Vue route Vue

  3. Route Komponentas: kiekvienas route turi atitinkamą komponentą. Suaktyvinus a route, bus rodomas susijęs komponentas.

  4. Dinaminis Route: dinaminis route leidžia apibrėžti route s su dinaminiais parametrais. Pavyzdžiui, galite apibrėžti a route su keliu „/user/:id“, kad būtų rodoma vartotojo informacija su atitinkamu ID.

  5. Įdėtas Route: įdėtas route yra sąvoka, leidžianti sutalpinti antrinius vaikus route iš tėvų route. Tai leidžia kurti sudėtingas route struktūras ir tvarkyti komponentus įdėtu būdu.

  6. Peradresavimas Route: peradresavimas route leidžia nukreipti vartotojus iš vieno kelio į kitą. Tai naudinga, kai norite route vartotojams pereiti nuo seno kelio į naują.

  7. Route Apsauga: apsauga route yra funkcija, leidžianti patikrinti ir kontroliuoti prieigą prie route s. Naudodami route apsaugas galite apibrėžti sąlygas, kad vartotojai negalėtų pasiekti tam tikrų route s arba atlikti specialų tvarkymą prieš peradresavimą.

 

Norėdami naudoti, galite atlikti šiuos veiksmus: Vue Router

1 veiksmas: įdiekite naudodami npm arba verpalus: Vue Router 

npm install vue-router

arba 

yarn add vue-router

2 veiksmas: sukurkite failą projekto šakniniame kataloge. Šiame faile paskelbsime ir sukonfigūruosime programos 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;

3 veiksmas: main.js importuokite failą ir susiekite jį su programa: 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');

4 veiksmas: faile galite deklaruoti s naudodami tokius komponentus kaip, ir kitas ypatybes. router.js route Vue Router path component

Pavyzdžiui, galite deklaruoti a route pagrindiniam puslapiui ir a route puslapiui apie taip:

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

5 veiksmas: komponentuose Vue galite naudoti komponentus, pvz., kurti nuorodas į kitus ir rodyti esamo turinio turinį. <router-link> route <router-view> route

Pavyzdžiui, pagrindinio komponento šablone galite sukurti nuorodą į puslapį apie: <router-link> 

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

Programos komponento šablone galite naudoti dabartinio turinio turiniui rodyti: <router-view> route 

<router-view></router-view>

Atlikdami šiuos veiksmus nustatėte ir naudojate .js programai valdyti ir. Vue Router routing navigation Vue