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.
Route Props Object Mode
We can set the props property of the routes to accept props.
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>
</p>
<router-view></router-view>
</div>
<script>
const Foo = {
template: "<div>foo</div>"
};
const Bar = {
template: "<div>bar {{id}}</div>",
props: ["id"]
};
const routes = [
{
path: "/foo",
component: Foo
},
{
path: "/bar",
component: Bar,
props: { id: 1 }
}
];
const router = VueRouter.createRouter({
history: VueRouter.createWebHistory(),
routes
});
const app = Vue.createApp({});
app.use(router);
app.mount("#app");
</script>
</body>
</html>
We have the props property in the routes entry with an object:
{ id: 1 }
The id prop is passed in automatically if we navigate to /bar .
The router-link has the /bar as the value of the to attribute.
And when we click on the bar link, we see bar 1 displayed.
The 1 is from the props.
This way of passing route props is useful for static route props.
Route Props Function Mode
The props property can also have a function as its value.
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?id=1">bar</router-link>
</p>
<router-view></router-view>
</div>
<script>
const Foo = {
template: "<div>foo</div>"
};
const Bar = {
template: "<div>bar {{id}}</div>",
props: ["id"]
};
const routes = [
{
path: "/foo",
component: Foo
},
{
path: "/bar",
component: Bar,
props: (route) => ({ id: route.query.id })
}
];
const router = VueRouter.createRouter({
history: VueRouter.createWebHistory(),
routes
});
const app = Vue.createApp({});
app.use(router);
app.mount("#app");
</script>
</body>
</html>
We have a function that takes the route object as the parameter.
And we get the query parameter from the query property.
We just return an object with the key being the key of the query parameter.
The value is the query parameter value.
The router-link for the /bar route has the id query parameter.
Now when we click on the bar link, we see bar 1 displayed.
HTML5 History Mode
Hash mode is the default way of mapping routes.
It uses the URL to simulate a full URL so that the page won’t be reloaded when the URL changes.
With history mode, we remove the hash sign so that the URL looks like any other URL we see.
To make HTML5 mode work with various servers, we may have to configure it so that the browser stays in the app when we go to a different URL.
For example, in Apache, we write:
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>
to make all URL maps to index.html so that index.html of our Vue app is loaded when any request is made.
Conclusion
We can pass route props in various ways with Vue Router 4.
If we use history mode with our Vue 3 app, then we may have to configure our web server to go to our app when any request is made.
