close

Routing ਅਤੇ .js Navigation ਵਿੱਚ Vue- ਇੱਕ ਵਿਆਪਕ ਗਾਈਡ

Routing ਅਤੇ ਇੱਕ ਵੈੱਬ ਐਪਲੀਕੇਸ਼ਨ ਵਿੱਚ ਪੰਨੇ ਬਣਾਉਣ ਅਤੇ ਉਹਨਾਂ ਵਿਚਕਾਰ ਨੈਵੀਗੇਟ ਕਰਨ ਲਈ .js Navigation ਵਿੱਚ ਜ਼ਰੂਰੀ ਸੰਕਲਪ ਹਨ । .js ਵਿੱਚ ਸਿਸਟਮ ਦੇ ਪ੍ਰਬੰਧਨ ਲਈ ਇੱਕ ਸ਼ਕਤੀਸ਼ਾਲੀ ਅਤੇ ਲਚਕਦਾਰ ਲਾਇਬ੍ਰੇਰੀ ਹੈ । Vue Vue Router routing Vue

 

route ਇੱਥੇ .js ਵਿੱਚ s ਨਾਲ ਸੰਬੰਧਿਤ ਬੁਨਿਆਦੀ ਧਾਰਨਾਵਾਂ ਹਨ Vue:

  1. Route: A route ਇੱਕ ਮਾਰਗ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦਾ ਹੈ ਅਤੇ ਇਸਨੂੰ ਸੰਬੰਧਿਤ ਹਿੱਸੇ ਨਾਲ ਜੋੜਦਾ ਹੈ। ਹਰੇਕ route ਦਾ ਇੱਕ ਮਾਰਗ ਅਤੇ ਇੱਕ ਹਿੱਸਾ ਹੁੰਦਾ ਹੈ।

  2. Vue Router: .js ਵਿੱਚ s ਦੇ ਪ੍ਰਬੰਧਨ ਲਈ ਇੱਕ ਲਾਇਬ੍ਰੇਰੀ ਹੈ । ਇਹ ਇੱਕ ਐਪਲੀਕੇਸ਼ਨ ਵਿੱਚ s ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਅਤੇ ਪ੍ਰਬੰਧਨ ਲਈ ਟੂਲ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ। Vue Router route Vue route Vue

  3. Route ਕੰਪੋਨੈਂਟ: ਹਰੇਕ route ਦਾ ਇੱਕ ਅਨੁਸਾਰੀ ਹਿੱਸਾ ਹੁੰਦਾ ਹੈ। ਜਦੋਂ ਇੱਕ route ਐਕਟੀਵੇਟ ਹੁੰਦਾ ਹੈ, ਸੰਬੰਧਿਤ ਕੰਪੋਨੈਂਟ ਪ੍ਰਦਰਸ਼ਿਤ ਕੀਤਾ ਜਾਵੇਗਾ।

  4. ਡਾਇਨਾਮਿਕ Route: ਇੱਕ ਡਾਇਨਾਮਿਕ route ਤੁਹਾਨੂੰ route ਡਾਇਨਾਮਿਕ ਪੈਰਾਮੀਟਰਾਂ ਨਾਲ s ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਨ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ। ਉਦਾਹਰਨ ਲਈ, ਤੁਸੀਂ route ਸੰਬੰਧਿਤ id ਨਾਲ ਉਪਭੋਗਤਾ ਜਾਣਕਾਰੀ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨ ਲਈ ਮਾਰਗ "/user/:id" ਨਾਲ ਇੱਕ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰ ਸਕਦੇ ਹੋ।

  5. ਨੇਸਟਡ Route: ਇੱਕ ਨੇਸਟਡ route ਇੱਕ ਸੰਕਲਪ ਹੈ ਜੋ ਤੁਹਾਨੂੰ route ਮਾਤਾ-ਪਿਤਾ ਦੇ ਅੰਦਰ ਬੱਚੇ ਨੂੰ ਨੇਸਟ ਕਰਨ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ route । ਇਹ ਤੁਹਾਨੂੰ ਗੁੰਝਲਦਾਰ ਢਾਂਚੇ ਬਣਾਉਣ route ਅਤੇ ਨੇਸਟਡ ਤਰੀਕੇ ਨਾਲ ਭਾਗਾਂ ਨੂੰ ਸੰਗਠਿਤ ਕਰਨ ਦੇ ਯੋਗ ਬਣਾਉਂਦਾ ਹੈ।

  6. ਰੀਡਾਇਰੈਕਟ Route: ਇੱਕ ਰੀਡਾਇਰੈਕਟ route ਤੁਹਾਨੂੰ ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ ਇੱਕ ਮਾਰਗ ਤੋਂ ਦੂਜੇ ਮਾਰਗ 'ਤੇ ਰੀਡਾਇਰੈਕਟ ਕਰਨ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ। ਇਹ ਉਦੋਂ ਲਾਭਦਾਇਕ ਹੁੰਦਾ ਹੈ ਜਦੋਂ ਤੁਸੀਂ route ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ ਪੁਰਾਣੇ ਮਾਰਗ ਤੋਂ ਨਵੇਂ ਮਾਰਗ 'ਤੇ ਜਾਣਾ ਚਾਹੁੰਦੇ ਹੋ।

  7. Route ਗਾਰਡ: ਇੱਕ route ਗਾਰਡ ਇੱਕ ਫੰਕਸ਼ਨ ਹੈ ਜੋ ਤੁਹਾਨੂੰ route s ਤੱਕ ਪਹੁੰਚ ਦੀ ਜਾਂਚ ਅਤੇ ਨਿਯੰਤਰਣ ਕਰਨ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ। ਗਾਰਡਾਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ route, ਤੁਸੀਂ ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ ਕੁਝ ਖਾਸ route ਐਸ ਤੱਕ ਪਹੁੰਚਣ ਤੋਂ ਰੋਕਣ ਲਈ ਸ਼ਰਤਾਂ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰ ਸਕਦੇ ਹੋ ਜਾਂ ਰੀਡਾਇਰੈਕਸ਼ਨ ਤੋਂ ਪਹਿਲਾਂ ਵਿਸ਼ੇਸ਼ ਹੈਂਡਲਿੰਗ ਕਰ ਸਕਦੇ ਹੋ।

 

ਵਰਤਣ ਲਈ, ਤੁਸੀਂ ਇਹਨਾਂ ਕਦਮਾਂ ਦੀ ਪਾਲਣਾ ਕਰ ਸਕਦੇ ਹੋ: Vue Router

ਕਦਮ 1: npm ਜਾਂ ਧਾਗੇ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਸਥਾਪਿਤ ਕਰੋ: Vue Router 

npm install vue-router

ਜਾਂ 

yarn add vue-router

ਕਦਮ 2: ਪ੍ਰੋਜੈਕਟ ਦੀ ਰੂਟ ਡਾਇਰੈਕਟਰੀ ਵਿੱਚ ਇੱਕ ਫਾਈਲ ਬਣਾਓ । ਇਸ ਫਾਈਲ ਵਿੱਚ, ਅਸੀਂ ਐਪਲੀਕੇਸ਼ਨ ਦੇ 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

ਉਦਾਹਰਨ ਲਈ, ਤੁਸੀਂ route ਹੋਮ ਪੇਜ ਲਈ a ਅਤੇ route ਇਸ ਬਾਰੇ ਪੰਨੇ ਲਈ a ਦਾ ਐਲਾਨ ਇਸ ਤਰ੍ਹਾਂ ਕਰ ਸਕਦੇ ਹੋ:

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, ਤੁਸੀਂ ਕੰਪੋਨੈਂਟਸ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹੋ ਜਿਵੇਂ ਕਿ ਹੋਰਾਂ ਦੇ ਲਿੰਕ ਬਣਾਉਣ ਲਈ, ਅਤੇ ਮੌਜੂਦਾ ਦੀ ਸਮੱਗਰੀ ਨੂੰ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨ ਲਈ । <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