Skip to content

13. Proyecto [vuejs-11]: enrutamiento y navegación

El enrutamiento es lo que permitirá al usuario navegar entre las diferentes páginas de la aplicación.

La estructura del proyecto es la siguiente:

Image

13.1. Instalación de las dependencias

El enrutamiento en [Vue.js] requiere la dependencia [vue-router]:

Image

  • en [1-3], se instala la dependencia [vue-router];
  • en [4-6], tras instalar la dependencia, se ha modificado el archivo [package.json];

13.2. El script de enrutamiento [router.js]

Las reglas de navegación de la aplicación se registran en el archivo [router.js] (el nombre del script puede ser cualquiera):


// importaciones necesarias para el enrutamiento
import Vue from 'vue'
import VueRouter from 'vue-router'

// complemento de enrutamiento
Vue.use(VueRouter)

// los componentes de destino del enrutamiento
import Component1 from './components/Component1.vue'
import Component2 from './components/Component2.vue'
import Component3 from './components/Component3.vue'


// las rutas de la aplicación
const routes = [
  // Inicio
  { path: '/', name: 'home', component: Component1 },
  // Componente1
  {
    path: '/vue1', name: 'vue1', component: Component1
  },
  {
    // Componente2
    path: '/vue2', name: 'vue2', component: Component2
  },
  // Componente3
  {
    path: '/vue3', name: 'vue3', component: Component3
  },
]

// el enrutador
const router = new VueRouter({
  routes,
  mode: 'history',
})

// exportación del enrutador
export default router

Comentarios

  • el script [router.js] establecerá las reglas de enrutamiento de nuestra aplicación;
  • líneas 1-6: activación del plugin [vue-router] necesario para el enrutamiento. Esta activación requiere la importación de la clase/función [Vue] (línea 2) y del complemento de enrutamiento (línea 3). Este complemento se ha instalado junto con la dependencia [router] que acabamos de instalar;
  • líneas 8-11: importación de las vistas de destino del enrutamiento;
  • líneas 15-21: definición de la tabla de rutas. Cada elemento de esta tabla es un objeto con las siguientes propiedades:
    • [path]: el URL de la vista, la que queremos que se muestre en el campo [URL] del navegador. Podemos poner lo que queramos;
    • [name]: el nombre de la ruta. Aquí también se puede poner lo que se quiera;
    • [component]: el componente que muestra la vista. En este caso, tiene que ser un componente existente;

Así pues, aquí tendremos cuatro rutas [/, /vue1, /vue2, /vue3].

  • líneas 33-36: el enrutador es una instancia de la clase [VueRouter] importada en la línea 3. El constructor de [VueRouter] se utiliza aquí con dos parámetros:
    • las rutas de la aplicación;
    • un modo de escritura de URL en el navegador: el modo por defecto [hash] escribe los URL en forma de [localhost:8080/#/vue1] (# es el hash). El modo [history] elimina el símbolo # [localhost:8080/vue1];
  • línea 39: se exporta el enrutador;

13.3. El script principal [main.js]

El script principal [main.js] es el siguiente:


// importaciones
import Vue from 'vue'
import App from './App.vue'

// complementos
import BootstrapVue from 'bootstrap-vue'
Vue.use(BootstrapVue);

// bootstrap
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

// enrutador
import monRouteur from './router'

// configuración
Vue.config.productionTip = false

// instanciación del proyecto [App]
new Vue({
  name: "app",
  // vista principal
  render: h => h(App),
  // enrutador
  router: monRouteur,
}).$mount('#app')

Comentarios

  • línea 14: se importa el enrutador exportado por el script [router.js];
  • línea 25: este enrutador se ha pasado como parámetro al generador de la clase [Vue], que mostrará la vista principal [App], asociada a la propiedad [router] de la vista;

13.4. La vista principal [App]

El código de la vista principal es el siguiente:


<template>
  <div class="container">
    <b-card>
      <!-- un mensaje -->
      <b-alert show variant="success" align="center">
        <h4>[vuejs-11] : routage et navigation</h4>
      </b-alert>
      <!-- vista actual del enrutamiento -->
      <router-view />
    </b-card>
  </div>
</template>

<script>
  export default {
    name: "app"
  };
</script>

Comentarios

  • línea 9: muestra la vista actual del enrutamiento. La etiqueta <router-view> solo se reconoce si se ha inicializado la propiedad [router] de la vista;

13.5. El diseño de las vistas

El diseño de las vistas lo gestiona el siguiente componente [Layout]:


<template>
  <!-- línea -->
  <div>
    <b-row>
      <!-- zona de tres columnas -->
      <b-col cols="2" v-if="left">
        <slot name="left" />
      </b-col>
      <!-- zona de nueve columnas -->
      <b-col cols="10" v-if="right">
        <slot name="right" />
      </b-col>
    </b-row>
  </div>
</template>

<script>
  export default {
    // parámetros
    props: {
      left: {
        type: Boolean
      },
      right: {
        type: Boolean
      }
    }
  };
</script>

Ya hemos utilizado y explicado este diseño en el proyecto [vuejs-06] del apartado [vuejs-06].

13.6. El componente de navegación

El componente [Navigation] ofrece un menú de navegación al usuario:

Image

El componente que genera el bloque [1] es el siguiente:


<template>
  <!-- menú Bootstrap de tres opciones -->
  <b-nav vertical>
    <b-nav-item to="/vue1" exact exact-active-class="active">Vue 1</b-nav-item>
    <b-nav-item to="/vue2" exact exact-active-class="active">Vue 2</b-nav-item>
    <b-nav-item to="/vue3" exact exact-active-class="active">Vue 3</b-nav-item>
  </b-nav>
</template>
  • Este código genera el bloque 1 de tres enlaces que permiten la navegación;
  • el atributo [to] de las etiquetas <b-nav-item> debe corresponder a una de las propiedades [path] de las rutas del enrutador de la aplicación;

13.7. Las vistas

La vista n.º 1 es la siguiente:

Image

Las zonas [3-4] son generadas por el siguiente componente [Component1]:


<template>
  <Layout :left="true" :right="true">
    <!-- navegación -->
    <Navigation slot="left" />
    <!-- mensaje-->
    <b-alert show variant="primary" slot="right">Vue 1</b-alert>
  </Layout>
</template>

<script>
  import Navigation from './Navigation';
  import Layout from './Layout';

  export default {
    name: "component1",
    // componentes utilizados
    components: {
      Layout, Navigation
    }
  };
</script>

Comentarios

  • línea 2: la vista n.º 1 utiliza el diseño del componente [Layout] compuesto por dos ranuras denominadas [left, right];
  • línea 4: el menú de navegación se coloca en el espacio de la izquierda. Es la zona [3] que se ve arriba;
  • línea 6: se coloca un mensaje en el espacio de la derecha. Es la zona [4] que se ve arriba;

Las vistas 2 y 3 son análogas.

Vista n.º 2 mostrada por el componente [Component2]:


<!-- vista n.º 2 -->
<template>
  <Layout :left="true" :right="true">
    <!-- navegación -->
    <Navigation slot="left" />
    <!-- mensaje -->
    <b-alert show variant="secondary" slot="right">Vue 2</b-alert>
  </Layout>
</template>

<script>
  import Navigation from './Navigation';
  import Layout from './Layout';

  export default {
    name: "component2",
    // componentes de la vista
    components: {
      Layout, Navigation
    }
  };
</script>

Vista n.º 3 mostrada por el componente [Component3]:


<!-- vista n.º 3 -->
<template>
  <Layout :left="true" :right="true">
    <!-- navegación -->
    <Navigation slot="left" />
    <!-- mensaje -->
    <b-alert show variant="info" slot="right">Vue 3</b-alert>
  </Layout>
</template>

<script>
  import Navigation from "./Navigation";
  import Layout from "./Layout";

  export default {
    name: "component3",
    // componentes de la vista
    components: {
      Layout,
      Navigation
    }
  };
</script>

13.8. Ejecución del proyecto

Image

Al ejecutarse, se muestra la siguiente vista:

Image

  • En [1], URL es [http://localhost:8080]. Por lo tanto, se ha ejecutado la siguiente regla de enrutamiento: 

{ path: '/', name: 'home', component: Component1 }

Por lo tanto, se ha mostrado el componente [Component1]. Este muestra la vista n.º 1 [2]. Ahora hagamos clic en el enlace [Vue 1], cuyo código es el siguiente:


<b-nav-item to="/vue1" exact exact-active-class="active">Vue 1</b-nav-item>

La visualización pasa a ser la siguiente:

  • en [3], se ha ejecutado la siguiente regla de enrutamiento: 

path: '/vue1', name: 'vue1', component: Component1

Por lo tanto, se ha vuelto a mostrar el componente [Component1] y, por lo tanto, la vista n.º 1 [4]. Ahora hagamos clic en el enlace [Vue 2], cuyo código es el siguiente:


<b-nav-item to="/vue2" exact exact-active-class="active">Vue 2</b-nav-item>

La nueva vista queda así:

Image

  • en [5], se ha ejecutado la siguiente regla de enrutamiento: 

path: '/vue2', name: 'vue2', component: Component2

Por lo tanto, se ha mostrado el componente [Component2] y, por lo tanto, la vista n.º 2. Si ahora hacemos clic en el enlace [Vue 3], cuyo código es el siguiente:


<b-nav-item to="/vue3" exact exact-active-class="active">Vue 3</b-nav-item>

Obtenemos la siguiente vista nueva:

Image

  • en [6], se ha ejecutado la siguiente regla de enrutamiento: 

path: '/vue3', name: 'vue3', component: Component3

Por lo tanto, se ha mostrado el componente [Component3], es decir, la vista n.º 3 [8].

https://stahe.github.io
Este tutorial, escrito por Serge Tahé, se pone a disposición del público bajo los términos de la Creative Commons Reconocimiento – No comercial – Compartir igual 3.0 sin adaptaciones.