close

Routing agus Navigation in Vue .js- Treoir Chuimsitheach

Routing agus Navigation is coincheapa riachtanacha iad in Vue.js chun leathanaigh a chruthú agus chun nascleanúint a dhéanamh eatarthu i bhfeidhmchlár gréasáin. leabharlann chumhachtach sholúbtha chun an córas a bhainistiú i .js. Vue Router routing Vue

 

Seo iad na bunchoincheapa a bhaineann le route s in Vue.js:

  1. Route: route Sainmhíníonn A cosán agus nascann sé le comhpháirt chomhfhreagrach é. route Tá cosán agus comhpháirt ag gach ceann acu .

  2. Vue Router: is leabharlann é chun s in .js a bhainistiú. Soláthraíonn sé uirlisí chun s in fheidhmchlár a shainiú agus a bhainistiú. Vue Router route Vue route Vue

  3. Route Comhpháirt: route Tá comhpháirt chomhfhreagrach ag gach ceann acu. Nuair a route bheidh a gníomhachtaithe, taispeánfar an chomhpháirt ghaolmhar.

  4. Dinimiciúla: Ligeann Route dinimic duit s a shainiú le paraiméadair dhinimiciúla. Mar shampla, is féidir leat a shainiú leis an gcosán "/user/:id" chun faisnéis úsáideora a thaispeáint leis an id comhfhreagrach. route route route

  5. Neadaithe: Is coincheap é Route nead a ligeann duit leanbh a neadú laistigh de thuismitheoir. Ligeann sé seo duit struchtúir chasta a thógáil agus comhpháirteanna a eagrú ar bhealach neadaithe. route route route route

  6. Atreorú Route: Ligeann atreorú route duit úsáideoirí a atreorú ó chosán amháin go cosán eile. Tá sé seo úsáideach nuair is mian leat d' route úsáideoirí ó sheanchosán go ceann nua.

  7. Route Garda: route Is feidhm é garda a ligeann duit rochtain ar route s. Trí úsáid a bhaint as route gardaí, is féidir leat coinníollacha a shainiú chun úsáideoirí a chosc ó rochtain a fháil ar route s áirithe nó láimhseáil speisialta a dhéanamh roimh atreorú.

 

Chun úsáid a bhaint as, is féidir leat na céimeanna seo a leanúint: Vue Router

Céim 1: Suiteáil ag baint úsáide as npm nó snáth: Vue Router 

npm install vue-router

nó 

yarn add vue-router

Céim 2: Cruthaigh comhad i bhfréamheolaire an tionscadail. Sa chomhad seo, dearbhóimid agus cumróimid s an fheidhmchláir. 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;

Céim 3: Sa main.js chomhad, allmhairiú agus é a nascadh leis an iarratas: 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');

Céim 4: Sa chomhad, is féidir leat a dhearbhú go n-úsáideann tú comhpháirteanna mar, , agus airíonna eile. router.js route Vue Router path component

Mar shampla, is féidir leat a dhearbhú route don leathanach baile agus route don leathanach faoi mar seo a leanas:

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

Céim 5: I Vue gcomhpháirteanna, is féidir leat comhpháirteanna a úsáid mar naisc le s eile a chruthú, agus ábhar an tsrutha a thaispeáint. <router-link> route <router-view> route

Mar shampla, i dteimpléad na comhpháirte Baile, is féidir leat é a úsáid chun nasc chuig an leathanach faoi a chruthú: <router-link> 

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

I dteimpléad na comhpháirte App, is féidir leat é a úsáid chun ábhar an tsrutha a thaispeáint: <router-view> route 

<router-view></router-view>

Leis na céimeanna seo, tá tú socraithe agus úsáidte agat chun d' iarratas .js a bhainistiú agus a bhainistiú. Vue Router routing navigation Vue