Complete Vue.js 2 Web Development_ Practical guide to building end-to-end web development solutions with Vue.js 2

Vue Router Patterns Chapter 20

Using the router

Let's spin up a playground project and install the vue-router library. This allows us to

take advantage of routing inside our application and give us the power of a modern SPA.

Run the following commands in your Terminal:

# Create a new Vue project

$ vue init webpack-simple vue-router-basics

# Navigate to directory

$ cd vue-router-basics

# Install dependencies

$ npm install

# Install Vue Router

$ npm install vue-router

# Run application

$ npm run dev

As we're using webpack as part of our build system, we've installed the router with npm.

We can then initialize the router inside of src/main.js:

import Vue from 'vue';

import VueRouter from 'vue-router';

import App from './App.vue';

Vue.use(VueRouter);

new Vue({

el: '#app',

render: h => h(App)

});

This effectively registers VueRouter as a global plugin. A plugin simply is just a function

that receives Vue and options as parameters and allows libraries such as VueRouter to

add functionality to our Vue application.