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

Configuració de Vue Router

Següent ►
►

En aquest tema, aprendrem a configurar Vue Router, una biblioteca essencial per gestionar la navegació en aplicacions Vue.js d'una sola pàgina (SPA). Vue Router ens permet definir rutes i associar-les amb components, facilitant la creació d'aplicacions amb múltiples vistes.

  1. Instal·lació de Vue Router

1.1. Utilitzant Vue CLI

Si has creat la teva aplicació Vue utilitzant Vue CLI, pots afegir Vue Router durant el procés de creació del projecte. Si no ho has fet, pots afegir-lo posteriorment amb el següent comandament:

vue add router

1.2. Instal·lació manual

Si prefereixes instal·lar Vue Router manualment, pots fer-ho amb npm o yarn:

npm install vue-router

o

yarn add vue-router

  1. Configuració bàsica de Vue Router

2.1. Creació de l'arxiu de rutes

Primer, crea un arxiu router/index.js on definiràs les rutes de la teva aplicació:

// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
});

export default router;

2.2. Integració de Vue Router a l'aplicació

Després, integra Vue Router a la teva aplicació Vue. Obre el fitxer main.js i afegeix el router a la instància de Vue:

// src/main.js
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

createApp(App)
  .use(router)
  .mount('#app');

  1. Creació de components de vista

Crea els components que es mostraran quan es navegui a les diferents rutes. Per exemple, crea dos fitxers de components Home.vue i About.vue dins de la carpeta views:

<!-- src/views/Home.vue -->
<template>
  <div>
    <h1>Home</h1>
    <p>Benvingut a la pàgina principal!</p>
  </div>
</template>

<script>
export default {
  name: 'Home'
};
</script>
<!-- src/views/About.vue -->
<template>
  <div>
    <h1>About</h1>
    <p>Aquesta és la pàgina sobre nosaltres.</p>
  </div>
</template>

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

  1. Utilització de <router-link> i <router-view>

4.1. Navegació amb <router-link>

Utilitza el component <router-link> per crear enllaços de navegació entre les rutes definides:

<!-- 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>

4.2. Renderització de vistes amb <router-view>

El component <router-view> és on es renderitzaran els components associats a les rutes. En l'exemple anterior, <router-view> es troba dins del fitxer App.vue.

  1. Exercici pràctic

5.1. Objectiu

Crea una aplicació Vue amb dues pàgines: "Home" i "About". Configura Vue Router per gestionar la navegació entre aquestes pàgines.

5.2. Passos

  1. Crea una nova aplicació Vue utilitzant Vue CLI o qualsevol altre mètode.
  2. Instal·la Vue Router.
  3. Defineix les rutes per a les pàgines "Home" i "About".
  4. Crea els components Home.vue i About.vue.
  5. Afegeix enllaços de navegació utilitzant <router-link>.
  6. Renderitza les vistes utilitzant <router-view>.

5.3. Solució

Segueix els passos descrits anteriorment per configurar Vue Router i crear els components de vista. Aquí tens un resum del codi:

// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
});

export default router;
// src/main.js
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

createApp(App)
  .use(router)
  .mount('#app');
<!-- 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>
<!-- src/views/Home.vue -->
<template>
  <div>
    <h1>Home</h1>
    <p>Benvingut a la pàgina principal!</p>
  </div>
</template>

<script>
export default {
  name: 'Home'
};
</script>
<!-- src/views/About.vue -->
<template>
  <div>
    <h1>About</h1>
    <p>Aquesta és la pàgina sobre nosaltres.</p>
  </div>
</template>

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

  1. Conclusió

En aquesta secció, hem après a configurar Vue Router per gestionar la navegació en una aplicació Vue.js. Hem vist com definir rutes, crear components de vista i utilitzar <router-link> i <router-view> per a la navegació i renderització de vistes. Amb aquests coneixements, estàs preparat per crear aplicacions Vue.js amb múltiples pàgines i una navegació fluida. En el següent tema, explorarem les rutes dinàmiques per fer les nostres aplicacions encara més flexibles.

◄ 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