Vue Router 4 is in beta and it’s subject to change.
To build a single page app easily, we got to add routing so that URLs will be mapped to components that are rendered.
In this article, we’ll look at how to use Vue Router 4 with Vue 3.
Named Routes
We can name our routes to identify our route with a name instead of the path.
For example, we can write:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://unpkg.com/vue@next"></script>
<script src="https://unpkg.com/vue-router@4.0.0-beta.7/dist/vue-router.global.js"></script>
<title>App</title>
</head>
<body>
<div id="app">
<p>
<router-link to="/foo">Foo</router-link>
<router-link :to="{ name: 'bar', params: { id: '123' }}"
>Bar</router-link
>
</p>
<p>{{ $router.currentRoute.value.params.id }}</p>
<router-view></router-view>
</div>
<script>
const Foo = {
template: "<div>foo</div>"
};
const Bar = {
template: "<div>bar</div>"
};
const routes = [
{ path: "/foo", component: Foo },
{ path: "/bar/:id", component: Bar, name: "bar" }
];
const router = VueRouter.createRouter({
history: VueRouter.createWebHistory(),
routes
});
const app = Vue.createApp({});
app.use(router);
app.mount("#app");
</script>
</body>
</html>
to create a route bar that takes an :id URL parameter.
It also has a name property with the route name.
Then we have a router-link that has the to prop with an object.
The object has the route name as the value of the name property.
params has the route parameters that the route takes.
Named Views
We can have named views with Vue Router.
For example, we can write:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://unpkg.com/vue@next"></script>
<script src="https://unpkg.com/vue-router@4.0.0-beta.7/dist/vue-router.global.js"></script>
<title>App</title>
</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.
It has the path property with the URL path.
The components property has an object with the property names being the name prop values of the router-view s.
default is for a router view with no name.
In the template, we have the router-view s to show the route content.
Then we see:
foo
bar
baz
displayed.
Nested Named Views
We can also have named views in child routes.
For example, we can write:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://unpkg.com/vue@next"></script>
<script src="https://unpkg.com/vue-router@4.0.0-beta.7/dist/vue-router.global.js"></script>
<title>App</title>
</head>
<body>
<div id="app">
<router-view></router-view>
</div>
<script>
const Parent = {
template: `<div>
parent
<router-view></router-view>
<router-view name="a"></router-view>
<router-view name="b"></router-view>
</div>`
};
const Foo = {
template: "<div>foo</div>"
};
const Bar = {
template: "<div>bar</div>"
};
const Baz = {
template: "<div>baz</div>"
};
const routes = [
{
path: "/parent",
component: Parent,
children: [
{
path: "child",
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 the Parent route with the multiple router-view s.
The root template has one router-view .
Then the Parent component has the child router-view s.
In the routes array, we have an object with the /parent route that maps to the Parent component.
And we have a child route with the components for the router-view s.
Then we see:
parent
foo
bar
baz
displayed when we go to /parent/child .
Conclusion
We can have multiple router-view components with Vue Router 4.
Also, we can name our routes so we can use that for navigation.
