close

Routing kuma Navigation a cikin Vue .js- Cikakken Jagora

Routing kuma Navigation mahimman ra'ayoyi ne a cikin Vue.js don ƙirƙirar shafuka da kewayawa tsakanin su a cikin aikace-aikacen yanar gizo. ɗakin karatu ne mai ƙarfi kuma mai sassauƙa don sarrafa tsarin a cikin .js. Vue Router routing Vue

 

Anan akwai mahimman ra'ayoyi masu alaƙa da route s a cikin Vue.js:

  1. Route: A route yana bayyana hanya kuma ya danganta ta zuwa wani abin da ya dace. Kowannensu route yana da hanya da bangarensa.

  2. Vue Router: ɗakin karatu ne don sarrafa s a cikin .js. Yana ba da kayan aiki don ayyana da sarrafa s a cikin aikace-aikace. Vue Router route Vue route Vue

  3. Route Bangaren: Kowane route yana da abin da ya dace. Lokacin da route aka kunna, za a nuna abin da ke da alaƙa.

  4. Dynamic Route: Mai ƙarfi route yana ba ku damar ayyana route s tare da sigogi masu ƙarfi. Misali, zaku iya ayyana a route tare da hanyar "/ mai amfani/: id" don nuna bayanan mai amfani tare da id ɗin daidai.

  5. Nest Route: Gidan gida route shine ra'ayi da ke ba ka damar shigar da yara route a cikin iyaye route. Wannan yana ba ku damar gina hadaddun route sifofi da tsara abubuwan da ke cikin gida.

  6. Juyawa Route: Juyawa route yana ba ku damar tura masu amfani daga wannan hanya zuwa wata. Wannan yana da amfani lokacin da kake son route masu amfani daga tsohuwar hanya zuwa sabuwar.

  7. Route Guard: Mai route gadi aiki ne da ke ba ka damar dubawa da sarrafa damar zuwa route s. Ta amfani da route masu gadi, zaku iya ayyana sharuɗɗan don hana masu amfani samun dama ga wasu route s ko aiwatar da mu'amala na musamman kafin turawa.

 

Don amfani, kuna iya bin waɗannan matakan: Vue Router

Mataki 1: Shigar ta amfani da npm ko yarn: Vue Router 

npm install vue-router

ko 

yarn add vue-router

Mataki 2: Ƙirƙiri fayil a cikin tushen directory na aikin. A cikin wannan fayil ɗin, za mu ayyana kuma mu daidaita s na aikace-aikacen. 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;

Mataki 3: A cikin main.js fayil, shigo da haɗa shi zuwa aikace-aikacen: 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');

Mataki 4: A cikin fayil ɗin, zaku iya ayyana s ta amfani da abubuwa kamar, , da sauran kaddarorin. router.js route Vue Router path component

Misali, zaku iya ayyana a route don shafin gida da kuma route game da shafi kamar haka:

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

Mataki na 5: A cikin Vue abubuwan haɗin gwiwa, zaku iya amfani da abubuwan haɗin gwiwa kamar ƙirƙirar hanyoyin haɗi zuwa wasu s, da kuma nuna abubuwan da ke cikin na yanzu. <router-link> route <router-view> route

Misali, a cikin samfuri na bangaren Gida, zaku iya amfani da shi don ƙirƙirar hanyar haɗi zuwa shafi game da: <router-link> 

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

A cikin samfuri na ɓangaren App, zaku iya amfani da su don nuna abun ciki na yanzu: <router-view> route 

<router-view></router-view>

Tare da waɗannan matakan, kun saita kuma kun yi amfani da su don sarrafa kuma a cikin aikace-aikacen ku na .js. Vue Router routing navigation Vue