Introducció

Les rutes niades en Vue Router permeten crear estructures de navegació més complexes i organitzades dins d'una aplicació Vue.js. Aquestes rutes són útils quan es vol tenir una jerarquia de vistes, on una vista principal conté sub-vistes que es poden navegar de manera independent.

Configuració bàsica

Instal·lació de Vue Router

Abans de començar, assegura't que tens Vue Router instal·lat en el teu projecte. Si no ho tens, pots instal·lar-lo amb npm o yarn:

npm install vue-router
# o
yarn add vue-router

Definició de les rutes niades

Per definir rutes niades, primer has de crear una estructura de components que representin les diferents vistes. Suposem que tenim una aplicació amb una vista principal User i dues sub-vistes UserProfile i UserPosts.

Components

// User.vue
<template>
  <div>
    <h2>User</h2>
    <router-view></router-view> <!-- Aquí es renderitzaran les sub-vistes -->
  </div>
</template>

<script>
export default {
  name: 'User'
}
</script>

// UserProfile.vue
<template>
  <div>
    <h3>User Profile</h3>
    <p>Informació del perfil de l'usuari.</p>
  </div>
</template>

<script>
export default {
  name: 'UserProfile'
}
</script>

// UserPosts.vue
<template>
  <div>
    <h3>User Posts</h3>
    <p>Llista de publicacions de l'usuari.</p>
  </div>
</template>

<script>
export default {
  name: 'UserPosts'
}
</script>

Definició de les rutes

Ara, definim les rutes niades en el fitxer de configuració de Vue Router:

import Vue from 'vue';
import Router from 'vue-router';
import User from './components/User.vue';
import UserProfile from './components/UserProfile.vue';
import UserPosts from './components/UserPosts.vue';

Vue.use(Router);

const routes = [
  {
    path: '/user',
    component: User,
    children: [
      {
        path: 'profile',
        component: UserProfile
      },
      {
        path: 'posts',
        component: UserPosts
      }
    ]
  }
];

const router = new Router({
  routes
});

export default router;

Utilització de les rutes niades

Amb les rutes definides, ara pots navegar a les sub-vistes utilitzant enllaços de navegació:

<!-- App.vue -->
<template>
  <div id="app">
    <nav>
      <router-link to="/user/profile">Perfil de l'usuari</router-link>
      <router-link to="/user/posts">Publicacions de l'usuari</router-link>
    </nav>
    <router-view></router-view>
  </div>
</template>

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

Exercici pràctic

Objectiu

Crea una aplicació Vue.js amb rutes niades que mostri informació d'un usuari i les seves publicacions.

Passos

Crea un nou projecte Vue.js.
Instal·la Vue Router.
Defineix els components User, UserProfile i UserPosts.
Configura les rutes niades.
Afegeix enllaços de navegació per accedir a les sub-vistes.

Solució

// 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');

// router.js
import Vue from 'vue';
import Router from 'vue-router';
import User from './components/User.vue';
import UserProfile from './components/UserProfile.vue';
import UserPosts from './components/UserPosts.vue';

Vue.use(Router);

const routes = [
  {
    path: '/user',
    component: User,
    children: [
      {
        path: 'profile',
        component: UserProfile
      },
      {
        path: 'posts',
        component: UserPosts
      }
    ]
  }
];

const router = new Router({
  routes
});

export default router;

<!-- App.vue -->
<template>
  <div id="app">
    <nav>
      <router-link to="/user/profile">Perfil de l'usuari</router-link>
      <router-link to="/user/posts">Publicacions de l'usuari</router-link>
    </nav>
    <router-view></router-view>
  </div>
</template>

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

<!-- User.vue -->
<template>
  <div>
    <h2>User</h2>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'User'
}
</script>

<!-- UserProfile.vue -->
<template>
  <div>
    <h3>User Profile</h3>
    <p>Informació del perfil de l'usuari.</p>
  </div>
</template>

<script>
export default {
  name: 'UserProfile'
}
</script>

<!-- UserPosts.vue -->
<template>
  <div>
    <h3>User Posts</h3>
    <p>Llista de publicacions de l'usuari.</p>
  </div>
</template>

<script>
export default {
  name: 'UserPosts'
}
</script>

Conclusió

Les rutes niades en Vue Router permeten crear aplicacions amb estructures de navegació més complexes i organitzades. Amb aquesta funcionalitat, pots gestionar sub-vistes dins d'una vista principal, millorant l'experiència d'usuari i la mantenibilitat del codi. Practica amb l'exercici proposat per consolidar els teus coneixements sobre rutes niades.

Rutes niades

Introducció

Configuració bàsica

Instal·lació de Vue Router

Definició de les rutes niades

Components

Definició de les rutes

Utilització de les rutes niades

Exercici pràctic

Objectiu

Passos

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