Vue.js es un framework de aplicación web fácil de usar que podemos usar para desarrollar aplicaciones front-end interactivas.
En este artículo, veremos cómo definir y usar rutas con nombre y vistas con nombre con Vue Router; con Vue Router, podemos usar multiples paginas en una misma aplicacion en Vue y cambiar las mismas mediante la URL para poder ir a otras páginas; con Vue Router, podemos crear una aplicacion en Vue de la maneta tradicional como haríamos en una aplicación en HTML que consta de multiples páginas, la podemos tener en Vue.
Rutas con nombre
Podemos agregar un nombre para identificar una ruta agregando una propiedad de nombre a nuestros objetos de ruta.
Por ejemplo, podemos escribir:
{
name: 'list-category',
path: 'category',
components: {
default: ListCategory,
a: { template: 'Listado de categorías' }
}
},Y para referenciar la misma, desde alguna parte, hacemos lo siguiente; esta es la forma en la cual podemos crear un enlace en en Vue Router:
<router-link :to="{ name: 'list-category' }">Listado</router-link>La ventana que tenemos con este enfoque es que al emplear un routerLink en vez de un enlace en HTML tradicional es que, la página no recarga en su totalidad si no, solamente el componente; de esta manera, podemos tener una web SPA muy facilmente con Vue.
Vistas con nombre
Podemos tener vistas con nombre con Vue Router.
Por ejemplo, podemos escribir:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div id="app">
<router-view></router-view>
<router-view name="a"></router-view>
<router-view name="b"></router-view>
</div>
<script>
const Foo = {
template: "<div>foo</div>"
};
const Bar = {
template: "<div>bar</div>"
};
const Baz = {
template: "<div>baz</div>"
};
const routes = [
{
path: "/",
components: {
default: Foo,
a: Bar,
b: Baz
}
}
];
const router = VueRouter.createRouter({
history: VueRouter.createWebHistory(),
routes
});
const app = Vue.createApp({});
app.use(router);
app.mount("#app");
</script>
</body>
</html>Tenemos un objeto en el array de rutas llamado routes, al igual que vimos en crear rutas con Vue Router.
Lo más importante del código anterior es el componente llamado router-view que recordemos es el que podemos usar para cargar el componente referenciado en la ruta; en el script anterior puedes notar que existen varios, pero, tienen nombres, por lo tanto ahora, tenemos router-views con nombres y por defecto que podemos usar.
En la ruta del path:
path: "/",Al tener tres router-views:
<router-view></router-view>
<router-view name="a"></router-view>
<router-view name="b"></router-view>La que no tiene nombre, es la que usamos por defecto:
<router-view></router-view>Para las otras 3, que tienen nombre, se referencian por el mismo:
<router-view name="a"></router-view>
<router-view name="b"></router-view>Para referenciarlas desde la definición de la ruta:
components: {
default: Foo,
a: Bar,
b: Baz
}
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter