Using Vue Router Within a Module System (Webpack, Node, Vue CLI)

Vue Router is most useful when working with a Webpack, Node.js, or a module-based single page application systems like the apps created with Vue CLI 3. Chapter 2: Scaffolding Projects With Vue CLI 3 goes over creating a Webpack built Vue.js application with Vue CLI 3. If you haven’t read Chapter 2 yet, it’s recommended that you read it so you have a general understanding of single file components and Webpack.

If you generated a project with Vue CLI 3 or the Vue CLI UI, there is an option to include Vue Router during the setup process. If you did not select Vue Router during the setup process, you can still import it via NPM or Yarn and import them into your project with ECMAScript6 (ES6).

$ npm install vue-router --save
# or
$ yarn add vue-router

In the src directory of your application, create a router.js file. This file will store all of your application’s routes. In this file, you can define which...