Vue.js is an easy to use web application framework that we can use to develop interactive front-end applications.
In this article, we'll take a look at defining and using named routes and named views with Vue Router; with Vue Router, we can use multiple pages in the same Vue application and change them through the URL to go to other pages; With Vue Router, we can create an application in Vue in the traditional way as we would do in an HTML application that consists of multiple pages, we can have it in Vue.
Named routes
We can add a name to identify a route by adding a name property to our route objects.
Por ejemplo, podemos escribir:
{
name: 'list-category',
path: 'category',
components: {
default: ListCategory,
a: { template: 'Listado de categorías' }
}
},And to reference it, from somewhere, we do the following; this is how we can create a link in Vue Router:
<router-link :to="{ name: 'list-category' }">Listado</router-link>The window that we have with this approach is that when using a routerLink instead of a link in traditional HTML, the page does not reload in its entirety, if not, only the component; In this way, we can have a SPA website very easily with Vue.
Named views
We can have named views with Vue Router.
For example, we can write:
<!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>We have an object in the routes array called routes, just like we saw in creating routes with Vue Router.
The most important part of the previous code is the component called router-view that we remember is the one that we can use to load the component referenced in the route; In the script above you can see that there are several, but they have names, so now we have router-views with names and defaults that we can use.
In the path path:
path: "/",By having three router-views:
<router-view></router-view>
<router-view name="a"></router-view>
<router-view name="b"></router-view>The one without a name is the one we use by default:
<router-view></router-view>For the other 3, which have a name, they are referenced by the same name:
<router-view name="a"></router-view>
<router-view name="b"></router-view>To reference them from the route definition:
components: {
default: Foo,
a: Bar,
b: Baz
}
Develop with Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter