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.
Redirect
We can add redirects to our 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">
<p>
<router-link to="/foo">foo</router-link>
<router-link to="/bar">bar</router-link>
<router-link to="/baz">baz</router-link>
</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",
component: Bar
},
{
path: "/baz",
redirect: "/bar"
}
];
const router = VueRouter.createRouter({
history: VueRouter.createWebHistory(),
routes
});
const app = Vue.createApp({});
app.use(router);
app.mount("#app");
</script>
</body>
</html>
We have 3 routes in the routes array.
In the 3rd entry, we have the redirect property to redirect the /baz route to the /bar route.
And we have a router-link that points to the /baz route.
So when we click on it, we still see bar displayed.
The redirection also works with named 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">
<p>
<router-link to="/foo">foo</router-link>
<router-link to="/bar">bar</router-link>
<router-link to="/baz">baz</router-link>
</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",
component: Bar,
name: "bar"
},
{
path: "/baz",
redirect: { name: "bar" }
}
];
const router = VueRouter.createRouter({
history: VueRouter.createWebHistory(),
routes
});
const app = Vue.createApp({});
app.use(router);
app.mount("#app");
</script>
</body>
</html>
We have the name property in the /bar route and we have the redirect property in the /baz route set to:
{ name: "bar" }
So we’ll see that when we click on ‘baz’, we see bar .
We can also redirect with a callback method.
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="/bar">bar</router-link>
<router-link to="/baz">baz</router-link>
</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",
component: Bar,
name: "bar"
},
{
path: "/baz",
redirect: (to) => "bar"
}
];
const router = VueRouter.createRouter({
history: VueRouter.createWebHistory(),
routes
});
const app = Vue.createApp({});
app.use(router);
app.mount("#app");
</script>
</body>
</html>
We return 'bar' in the redirect callback so that it goes to /bar when we click on /baz .
And we get the same result.
Conclusion
We can redirect our routes in various ways with Vue Router 4.
