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.

Creating...