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.
Programmatic Navigation
We can programmatically navigate through routes with Vue Router 4.
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>
<a href="#" @click.stop="go">Bar</a>
</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 }
];
const router = VueRouter.createRouter({
history: VueRouter.createWebHistory(),
routes
});
const app = Vue.createApp({
methods: {
go() {
this.$router.push("bar");
}
}
});
app.use(router);
app.mount("#app");
</script>
</body>
</html>
We have an a element to go to the bar route.
The stop modifier is added to @click to prevent propagation.
In the root Vue instance, we have the this.$router.push method to go to the given route.
We can also write:
this.$router.push({ path: "bar" });
We can do this for named routes:
router.push({ name: 'bar', params: { id: '123' } })
So 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>
<a href="#" @click.stop="go">Bar</a>
</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({
methods: {
go() {
this.$router.push({ name: "bar", params: { id: "123" } });
}
}
});
app.use(router);
app.mount("#app");
</script>
</body>
</html>
We added the :id URL parameter placeholder and added the name property to it.
So we can call push with the name value instead of the path.
The URL parameter is in the id property.
$router.replace(location, onComplete?, onAbort?)
The $router.replace method is like the $router.push except that it overwrites the previous history entry.
We can add the replace prop to router-link like:
<router-link :to="..." replace>
which is the same as:
router.replace(...)
$router.go(n)
The $router.go method takes a single integer and lets us go how given number of steps forward or backward in the browser history.
A negative integer means we’re going backward.
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>
<a href="#" @click.stop="goBack">Back</a>
</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 }
];
const router = VueRouter.createRouter({
history: VueRouter.createWebHistory(),
routes
});
const app = Vue.createApp({
methods: {
goBack() {
this.$router.go(-1);
}
}
});
app.use(router);
app.mount("#app");
</script>
</body>
</html>
We have the goBack method with the this.$router.go call to go back to the previous route.
The convention of the method follows the History API.
Conclusion
We can navigate to different routes programmatically with Vue Router 4, which works with Vue 3.
