Chapter 5. Client-Side Routing with vue-router
With the core Vue.js library introduced in the previous chapters, we can display and work with data on a page. However, a fully featured website requires more than just that. You may have noticed on some websites that you can navigate around the site without downloading the new page from the server, or if you’ve used another framework before, you’ve probably already met client-side routing.
vue-router is a library for Vue that means we can handle the routing of an app in the browser instead of on the server as in traditional websites. Routing is the act of taking a path (for example, /users/12345/posts) and deciding what should be displayed on the page.
As with Vue itself, there are multiple ways to install vue-router. You can use a CDN by adding the following:
Or if you’re using npm, you can install it using
npm install --save vue-router. Then, if you’re using a bundler such as webpack, you will need to call
Vue.use(VueRouter) to install vue-router:
This step adds components to your app that you will meet in the next few sections.
To set up the router, you need to give it an array of paths and the corresponding components: when the path is matched, the component will be displayed.
The following creates a simple two-path router: