close

Routing და .js Navigation -ში Vue- ყოვლისმომცველი გზამკვლევი

Routing და .js- Navigation ში არსებითი ცნებებია Vue გვერდების შესაქმნელად და მათ შორის ვებ აპლიკაციაში ნავიგაციისთვის. არის ძლიერი და მოქნილი ბიბლიოთეკა სისტემის სამართავად .js- ში. Vue Router routing Vue

 

აქ არის ფუნდამენტური ცნებები, რომლებიც დაკავშირებულია route s-თან Vue.js-ში:

  1. Route: A route განსაზღვრავს გზას და აკავშირებს მას შესაბამის კომპონენტთან. თითოეულს route აქვს გზა და კომპონენტი.

  2. Vue Router: არის ბიბლიოთეკა .js- ში s-ის მართვისთვის. ის უზრუნველყოფს ინსტრუმენტებს განაცხადში s-ების განსაზღვრისა და მართვისთვის. Vue Router route Vue route Vue

  3. Route კომპონენტი: თითოეულს route აქვს შესაბამისი კომპონენტი. როდესაც a route გააქტიურებულია, ასოცირებული კომპონენტი გამოჩნდება.

  4. დინამიური Route: დინამიური route საშუალებას გაძლევთ განსაზღვროთ route s დინამიური პარამეტრებით. მაგალითად, შეგიძლიათ განსაზღვროთ a route ბილიკით "/user/:id", რათა აჩვენოთ მომხმარებლის ინფორმაცია შესაბამისი id-ით.

  5. Nested Route: Nested route არის კონცეფცია, რომელიც საშუალებას გაძლევთ განათავსოთ ბავშვი route მშობლის შიგნით route. ეს საშუალებას გაძლევთ შექმნათ რთული route სტრუქტურები და მოაწყოთ კომპონენტები წყობილი სახით.

  6. გადამისამართება Route: გადამისამართება route საშუალებას გაძლევთ გადამისამართოთ მომხმარებლები ერთი გზიდან მეორეზე. ეს სასარგებლოა, როდესაც გსურთ route მომხმარებლების გადაყვანა ძველი გზიდან ახალზე.

  7. Route მცველი: route მცველი არის ფუნქცია, რომელიც საშუალებას გაძლევთ შეამოწმოთ და აკონტროლოთ წვდომა route s. მცველების გამოყენებით route, თქვენ შეგიძლიათ განსაზღვროთ პირობები, რათა თავიდან აიცილოთ მომხმარებლების წვდომა გარკვეულ route s-ებზე ან განახორციელოთ სპეციალური დამუშავება გადამისამართებამდე.

 

გამოსაყენებლად, შეგიძლიათ მიჰყვეთ ამ ნაბიჯებს: Vue Router

ნაბიჯი 1: დააინსტალირეთ npm ან ნართის გამოყენებით: Vue Router 

npm install vue-router

ან 

yarn add vue-router

ნაბიჯი 2: შექმენით ფაილი პროექტის root დირექტორიაში. ამ ფაილში ჩვენ გამოვაცხადებთ და დავაკონფიგურირებთ აპლიკაციის 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: ფაილში main.js იმპორტი და დააკავშირეთ იგი აპლიკაციასთან: 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: ფაილში შეგიძლიათ განაცხადოთ s ისეთი კომპონენტების გამოყენებით, როგორიცაა, , და სხვა თვისებები. router.js route Vue Router path component

მაგალითად, შეგიძლიათ გამოაცხადოთ a route მთავარი გვერდისთვის და a route შესახებ გვერდისთვის შემდეგნაირად:

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: კომპონენტებში Vue შეგიძლიათ გამოიყენოთ ისეთი კომპონენტები, როგორიცაა სხვა s-ებთან ბმულების შექმნა და მიმდინარე შიგთავსის ჩვენება. <router-link> route <router-view> route

მაგალითად, მთავარი კომპონენტის შაბლონში, შეგიძლიათ გამოიყენოთ ბმული შესახებ გვერდზე: <router-link> 

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

აპლიკაციის კომპონენტის შაბლონში შეგიძლიათ გამოიყენოთ მიმდინარე შინაარსის საჩვენებლად: <router-view> route 

<router-view></router-view>

ამ ნაბიჯებით თქვენ დააყენეთ და იყენებდით თქვენს .js აპლიკაციაში სამართავად. Vue Router routing navigation Vue