For a single-page application, when a user switches from one page (logic page) to another, the application will need to update the URL in the address bar accordingly so that when the user refreshes the page or copies the URL and shares it with others to open, the application will always render the same page. In Vue applications, we can achieve this by using vue-router (https://router.vuejs.org/guide), which is already included in the frontend scaffold that we generated.

In this section, we will only cover the features of vue-router that we need at the moment. For those features that we don't talk about here, we will introduce them later in this book.

As you probably have noticed, in App.vue there is <router-view> inside the #app div. vue-router will render the component that matches the router configuration in front-end/src/router, which is used by the root Vue component in front-end/src/main.js. When we open a page and there is no match component found on that path, nothing will be rendered.

And when we generate the frontend code using @vue/cli, we choose Yes to Use history mode for router?. With this selection, the mode property of the router is set as "history", which enables the router to use HTML5's history.pushState API to route the requests, so that we can visit the login page at http://localhost:3000/login instead of http://localhost:3000/#/login.