Chapter 9. Understanding Vue Router
This chapter covers
- Understanding client-side routing
- Understanding Vue Router
- Adding Vue Router to a project
When a single-page web app grows large, you might decide to split the UI into different views. You can use Vue Router to add client-side routing to handle navigation between views without causing a page reload.
This chapter is an introduction to Vue Router for readers who aren’t familiar with the library. You’ll learn about server-side routing, client-side routing, and Vue Router. At the end of the chapter, you’ll add a bare-bones Vue Router setup to the Hacker News app.
Note
If you already have experience with Vue Router, you can skip ahead to chapter 10. You will need to check out the chapter-10 GitHub branch to follow along with that chapter.
If you’ve written a React or Angular application before, you might be familiar with the concept of client-side routing. If not, don’t worry. The first section of this chapter is about understanding what client-side routing is. You’ll learn about the traditional server-side routing of websites and compare that to the client-side routing approach.
After you’ve seen client-side routing at a high level, you’ll learn about Vue Router and how to use it to add client-side routing to an application. Finally, you’ll add a Vue Router setup to the Hacker News application. First, let’s talk about routing.