Vue.js is an easy to use web app framework that we can use to develop interactive front end apps.
In order to create a single-page app with Vue.js, we have to map URLs to components so that when users go to a URL, it’ll show the corresponding component.
In this article, we’ll look at how to create some simple routes with the Vue Router.
Getting Started
We can use by Vue Router by adding a script tag with the URL for the Vue Router library.
We can make a simple app as follows:
src/index.js :
const Foo = { template: "<div>foo</div>" };
const Bar = { template: "<div>bar</div>" };
const routes = [
{ path: "/foo", component: Foo },
{ path: "/bar", component: Bar }
];
const router = new VueRouter({
routes
});
new Vue({
el: "#app",
router
});
index.html :
<!DOCTYPE html>
<html>
<head>
<title>App</title>
<meta charset="UTF-8" />
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<div>
<router-link to="/foo">Foo</router-link>
<router-link to="/bar">Bar</router-link>
</div>
<router-view></router-view>
</div>
<script src="src/index.js"></script>
</body>
</html>
In the code above, we defined 2 components Foo and Bar in src/index.js .
Then we mapped them to routes with:
const routes = [
{ path: "/foo", component: Foo },
{ path: "/bar", component: Bar }
];
const router = new VueRouter({
routes
});
Then we created a new Vue instance with:
new Vue({
el: "#app",
router
});
In the template, we have router-links to map the routes to a tags with the URLs to correspond to the routes we define:
<router-link to="/foo">Foo</router-link>
<router-link to="/bar">Bar</router-link>
Then we have router-view to show the components that are mapped to routes:
<router-view></router-view>
In the end, we should get:
Foo Link Bar Linkfoo
when we click on Foo Link .
and:
Foo Link Bar Linkbar
when we click on Bar Link .
Once we injected the router, we also get access to this.$router .
We can use it to navigate between routes. For example, we can write the following:
src/index.js :
const Foo = { template: "<div>foo</div>" };
const Bar = { template: "<div>bar</div>" };
const routes = [
{ path: "/foo", component: Foo },
{ path: "/bar", component: Bar }
];
const router = new VueRouter({
routes
});
new Vue({
el: "#app",
router,
methods: {
goBack() {
window.history.length > 1 ? this.$router.go(-1) : this.$router.push("/");
}
}
});
index.html :
<!DOCTYPE html>
<html>
<head>
<title>App</title>
<meta charset="UTF-8" />
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<div>
<router-link to="/foo">Foo Link</router-link>
<router-link to="/bar">Bar Link</router-link>
<a href="#" @click="goBack">Go Back</a>
</div>
<router-view></router-view>
</div>
<script src="src/index.js"></script>
</body>
</html>
Then when we click the Foo Link and Bar Link links a few times then click Go Back , we’ll see it’ll go back to the previous routes that we navigated to.
Route Parameters
We can get route parameters with the this.$route.params object.
For example, we can write an app that shows the URL parameter that’s passed in as follows:
src/index.js :
const User = {
computed: {
username() {
return this.$route.params.username;
}
},
template: `<div>{{username}}</div>`
};
const routes = [{ path: "/user/:username", component: User }];
const router = new VueRouter({
routes
});
new Vue({
el: "#app",
router
});
index.html :
<!DOCTYPE html>
<html>
<head>
<title>App</title>
<meta charset="UTF-8" />
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<div>
<router-link to="/user/foo">Foo</router-link>
<router-link to="/user/bar">Bar</router-link>
</div>
<router-view></router-view>
</div>
<script src="src/index.js"></script>
</body>
</html>
The :username in “/user/:username” is the parameter, so we can get what passed in after /user/ by using this.$route.params.username .
We added a computed property username which returns this.$route.params.username so we can use:
`<div>{{username}}</div>`
to show the username URL parameter.
Conclusion
We can map URLs to components by using Vue Router.
Once we included it, we can define routes which map URLs to components. They can also take parameters, which can be retrieved with the this.$route object that’s made available by injecting the Vue router into our app.
To display links that link to Vue Router routes, we use router-link , and to display the components mapped to routes, we use router-view .
