¿Cómo usar el enrutamiento en Vue.js?

Enrutador Vue: el enrutador Vue ayuda a vincular la URL/historial del navegador y los componentes de Vue, lo que permite que ciertas rutas representen cualquier vista asociada con él. Un enrutador vue se utiliza para crear aplicaciones de una sola página (SPA).

El vue-router se puede configurar de forma predeterminada al crear su nuevo proyecto. En este artículo, lo instalaremos por separado. Así podemos ver cómo funciona.

Configuración del proyecto e instalación del módulo:

• Paso 1: Vue Router se puede instalar a través de Npm con el paquete llamado vue-router usando el siguiente comando.

  npm install vue-router // OR 
  vue add router 

   

  Se puede utilizar a través de una etiqueta de secuencia de comandos como se muestra a continuación.

  <script src="https://unpkg.com/vue-router"></script>

• Paso 2:  Cree nuestro proyecto Vue usando el siguiente comando.

  vue create router-page 

• Paso 3:  Después de crear nuestro proyecto, agregaremos nuestro enrutador Vue usando el siguiente comando.

  vue add router

Estructura del proyecto: Se verá así.

Ejemplo:

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

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<template>
  <div class="about">
    <h1>This is an about page</h1>
  </div>
</template>

// Requiring module
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import Profile from '../views/Profile.vue'
  
Vue.use(VueRouter)
  
const routes = [
    {
        path: '/',
        name: 'Home',
        component: Home
    },
    //  Added our new route file named profile.vue
    {
        path: '/profile',
        name: 'Profile',
        Component: Profile
  
    },
    {
        path: '/about',
        name: 'About',
        // The route level code-splitting
        // this generates a separate chunk 
        // (about.[hash].js) for this route
        // which is lazy-loaded when the
        // route is visited.
        component:()=> import(
            /* webpackChunkName: "about" */ 
            '../views/About.vue'
        )
    },
]
  
// Create Vue Router Object
const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes
})
  
export default router

Ahora agreguemos nuestra nueva ruta a esa aplicación en nuestro archivo App.vue e index.js . Antes de agregar la nueva ruta, debemos crear nuestro nuevo componente llamado Profile.vue en nuestra carpeta de vistas.

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link> |
      added a new route to our app.vue file//
       <router-link to="/profile">Profile</router-link>
    </div>
    <router-view/>
  </div>
</template>

La <vista de enrutador> se puede utilizar para mostrar los componentes de enrutamiento en función de las rutas. Cuando se aplica a un elemento en una plantilla, convierte a ese elemento en un enlace que inicia la navegación a una ruta. La navegación abre uno o más componentes enrutados en una o más ubicaciones <router-link> en la página. Esto significa que cuando enrutamos a otra vista, la aplicación simplemente oculta cierta información y muestra la información solicitada.

<template>
  <div class="profile">
    <h1>This is a profile page</h1>
  </div>
</template>

Paso para ejecutar la aplicación: Ejecute el servidor usando el siguiente comando.

npm run serve

Salida: Abra su navegador y vaya a http://localhost:8080/ verá la siguiente salida.