Introducing vue-router

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...