El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Introducció a Vue Router

Següent ►
►

Què és Vue Router?

Vue Router és la solució oficial de Vue.js per a la gestió de rutes en aplicacions d'una sola pàgina (SPA). Permet definir rutes per a les diferents vistes de l'aplicació i proporciona una manera senzilla de navegar entre elles. Vue Router és molt flexible i es pot integrar fàcilment amb Vue.js per crear aplicacions web dinàmiques i interactives.

Característiques clau de Vue Router:

  • Declaració de rutes: Defineix rutes per a les diferents vistes de l'aplicació.
  • Navegació dinàmica: Permet canviar de vista sense recarregar la pàgina.
  • Rutes dinàmiques: Suporta paràmetres dinàmics en les rutes.
  • Rutes niades: Permet definir rutes dins d'altres rutes.
  • Guàrdies de navegació: Proporciona mecanismes per controlar l'accés a les rutes.
  • Historial del navegador: Utilitza l'API d'historial del navegador per a una navegació més natural.

Instal·lació de Vue Router

Utilitzant npm o yarn

Per instal·lar Vue Router en un projecte Vue.js, pots utilitzar npm o yarn:

npm install vue-router

o

yarn add vue-router

Configuració bàsica

Després d'instal·lar Vue Router, has de configurar-lo en el teu projecte. A continuació es mostra un exemple de configuració bàsica:

  1. Crea un fitxer router.js per definir les rutes:
// src/router.js
import Vue from 'vue';
import Router from 'vue-router';
import Home from './views/Home.vue';
import About from './views/About.vue';

Vue.use(Router);

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    }
  ]
});
  1. Importa i utilitza el router en la instància principal de Vue:
// src/main.js
import Vue from 'vue';
import App from './App.vue';
import router from './router';

Vue.config.productionTip = false;

new Vue({
  router,
  render: h => h(App)
}).$mount('#app');
  1. Crea els components de les vistes:
// src/views/Home.vue
<template>
  <div>
    <h1>Home</h1>
    <p>Welcome to the Home page!</p>
  </div>
</template>

<script>
export default {
  name: 'Home'
};
</script>
// src/views/About.vue
<template>
  <div>
    <h1>About</h1>
    <p>This is the About page.</p>
  </div>
</template>

<script>
export default {
  name: 'About'
};
</script>
  1. Utilitza el component router-view en el teu component principal:
<!-- src/App.vue -->
<template>
  <div id="app">
    <nav>
      <router-link to="/">Home</router-link>
      <router-link to="/about">About</router-link>
    </nav>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App'
};
</script>

Navegació entre rutes

Utilitzant router-link

El component router-link s'utilitza per crear enllaços de navegació entre les rutes definides. Exemple:

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

Navegació programàtica

També pots navegar entre rutes de manera programàtica utilitzant el mètode $router.push:

this.$router.push('/about');

Resum

En aquesta secció, hem après què és Vue Router i com instal·lar-lo i configurar-lo en un projecte Vue.js. Hem vist com definir rutes, crear components de vistes i utilitzar el component router-view per renderitzar les vistes. També hem explorat com navegar entre rutes utilitzant router-link i la navegació programàtica. En la següent secció, aprofundirem en la configuració de Vue Router i explorarem característiques més avançades com les rutes dinàmiques i niades.

◄ Anterior
◄
Següent ►
►

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

El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats