El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència

HOME

Les rutes dinàmiques són una característica poderosa de Vue Router que permet crear rutes amb segments de ruta variables. Aquestes rutes són útils quan necessitem crear rutes que depenguin de paràmetres dinàmics, com ara identificadors d'usuari, noms de productes, etc.

Què són les rutes dinàmiques?

Les rutes dinàmiques permeten definir rutes amb segments variables que poden canviar en funció de l'URL. Per exemple, en una aplicació de comerç electrònic, podríem tenir una ruta per a la pàgina de detall d'un producte que inclogui l'identificador del producte com a part de l'URL.

/product/:id

En aquest cas, :id és un segment de ruta dinàmic que pot canviar segons el producte que es vulgui visualitzar.

Configuració de rutes dinàmiques

Per configurar una ruta dinàmica, hem de definir una ruta amb un segment de ruta dinàmic en el nostre fitxer de configuració de rutes. A continuació es mostra un exemple de com fer-ho:

// src/router/index.js
import Vue from 'vue';
import Router from 'vue-router';
import ProductDetail from '@/components/ProductDetail.vue';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/product/:id',
      name: 'ProductDetail',
      component: ProductDetail
    }
  ]
});

En aquest exemple, hem definit una ruta /product/:id que carrega el component ProductDetail. El segment :id és dinàmic i pot canviar segons l'URL.

Accés als paràmetres de ruta

Els paràmetres de ruta es poden accedir des del component utilitzant l'objecte $route. A continuació es mostra com accedir al paràmetre id dins del component ProductDetail:

// src/components/ProductDetail.vue
<template>
  <div>
    <h1>Detall del Producte</h1>
    <p>ID del producte: {{ productId }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      productId: this.$route.params.id
    };
  },
  watch: {
    '$route.params.id'(newId) {
      this.productId = newId;
    }
  }
};
</script>

En aquest exemple, estem accedint al paràmetre id de la ruta i assignant-lo a la propietat productId del component. També estem utilitzant un observador (watch) per actualitzar productId si el paràmetre de ruta canvia.

Exemple pràctic

Vegem un exemple complet de com configurar i utilitzar rutes dinàmiques en una aplicació Vue.js.

Configuració de rutes

// src/router/index.js
import Vue from 'vue';
import Router from 'vue-router';
import Home from '@/components/Home.vue';
import ProductDetail from '@/components/ProductDetail.vue';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/product/:id',
      name: 'ProductDetail',
      component: ProductDetail
    }
  ]
});

Component Home

// src/components/Home.vue
<template>
  <div>
    <h1>Benvingut a la nostra botiga</h1>
    <ul>
      <li v-for="product in products" :key="product.id">
        <router-link :to="'/product/' + product.id">{{ product.name }}</router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      products: [
        { id: 1, name: 'Producte 1' },
        { id: 2, name: 'Producte 2' },
        { id: 3, name: 'Producte 3' }
      ]
    };
  }
};
</script>

Component ProductDetail

// src/components/ProductDetail.vue
<template>
  <div>
    <h1>Detall del Producte</h1>
    <p>ID del producte: {{ productId }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      productId: this.$route.params.id
    };
  },
  watch: {
    '$route.params.id'(newId) {
      this.productId = newId;
    }
  }
};
</script>

Exercicis pràctics

Exercici 1

Crea una aplicació Vue.js amb les següents característiques:

Una pàgina principal que mostri una llista d'usuaris.
Cada usuari ha de tenir un enllaç que porti a una pàgina de detall de l'usuari.
La pàgina de detall de l'usuari ha de mostrar l'identificador de l'usuari.

Solució

Configura les rutes:

// src/router/index.js
import Vue from 'vue';
import Router from 'vue-router';
import Home from '@/components/Home.vue';
import UserDetail from '@/components/UserDetail.vue';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/user/:id',
      name: 'UserDetail',
      component: UserDetail
    }
  ]
});

Crea el component Home:

// src/components/Home.vue
<template>
  <div>
    <h1>Llista d'Usuaris</h1>
    <ul>
      <li v-for="user in users" :key="user.id">
        <router-link :to="'/user/' + user.id">{{ user.name }}</router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      users: [
        { id: 1, name: 'Usuari 1' },
        { id: 2, name: 'Usuari 2' },
        { id: 3, name: 'Usuari 3' }
      ]
    };
  }
};
</script>

Crea el component UserDetail:

// src/components/UserDetail.vue
<template>
  <div>
    <h1>Detall de l'Usuari</h1>
    <p>ID de l'usuari: {{ userId }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userId: this.$route.params.id
    };
  },
  watch: {
    '$route.params.id'(newId) {
      this.userId = newId;
    }
  }
};
</script>

Conclusió

Les rutes dinàmiques són una eina essencial per crear aplicacions Vue.js flexibles i dinàmiques. Permeten definir rutes amb segments variables que poden canviar en funció de l'URL, facilitant la creació de pàgines de detall per a diferents entitats com productes, usuaris, etc. Amb la configuració adequada i l'accés als paràmetres de ruta, podem crear aplicacions més interactives i personalitzades.

Rutes dinàmiques

Continguts

Què són les rutes dinàmiques?

Configuració de rutes dinàmiques

Accés als paràmetres de ruta

Exemple pràctic

Configuració de rutes

Component Home

Component ProductDetail

Exercicis pràctics

Exercici 1

Solució

Conclusió

Curs de Vue.js

Mòdul 1: Introducció a Vue.js

Mòdul 2: Conceptes bàsics de Vue.js

Mòdul 3: Components de Vue.js

Mòdul 4: Vue Router

Mòdul 5: Gestió d'estat amb Vuex

Mòdul 6: Directives de Vue.js

Mòdul 7: Plugins de Vue.js

Mòdul 8: Proves en Vue.js

Mòdul 9: Conceptes avançats de Vue.js

Mòdul 10: Construcció i desplegament d'aplicacions Vue.js

Mòdul 11: Projectes de Vue.js del món real