Vue Router

Question 1

Qué es Vue Router

Answer 1

Vue Router is the official router for Vue.js (opens new window). It deeply integrates with Vue.js core to make building Single Page Applications with Vue.js a breeze. Features include:

Nested route/view mapping
Modular, component-based router configuration
Route params, query, wildcards
View transition effects powered by Vue.js’ transition system
Fine-grained navigation control
Links with automatic active CSS classes
HTML5 history mode or hash mode, with auto-fallback in IE9
Customizable Scroll Behavior

Question 2

Crear Proyecto

Answer 2

Elegir la opción de Vue Router en el CLI de vue.

Tendremos dos carpetas adicionales, las cuales son “router” y “views”

router: Archivo de configuración de rutas
views: Almacena todos los componentes que se comportarán como componentes padres de nuestras vistas

Question 3

router-link

Answer 3

Es el componente para permitir la navegación del usuario.
La ubicación de destino se especifica con el atributo to

<div>
Home |
About
</div>

Question 4

router-view

Answer 4

ver

Question 5

router/index.js

Answer 5

import { createRouter, createWebHistory } from ‘vue-router’
import Home from ‘../views/Home.vue’

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // 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')
  }
]

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

export default router

Question 6

Vistas vs Componentes

Answer 6

No confundir con componentes, estos siguen cumpliendo su función principal que es encapsular nuestra lógica y hacerla reutilizable. Aunque son practiamente lo mismo que las vistas, es para manter un orden en nuestro trabajo.

Question 7

Rutas con parámetros

Answer 7

Configurar router/index.js
{
path: ‘/blog/:id’,
name: ‘Articulo’,
component: () => import(/* webpackChunkName: “about” */ ‘../views/Articulo.vue’)
}
Visitar /blog/1 y cargará vista Articulo.vue

<h2>Parámetro: {{ $route.params.id }}</h2>

https://bluuweb.github.io/vue-udemy/03-router/#rutas-con-parametros