4). Vue.JS Routing Example

We are creating a single-page application with Vue + Vue Router.

When we add Vue Router, all we need to do is map our components to the routes and 

let Vue Router know where to render them. Here's a basic example:

HTML

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<div id="app">

<h1>Vue Router App!</h1>

<p>

<!-- use router-link component for navigation. -->

<!-- specify the link by passing the `to` prop. -->

<!-- <router-link> will be rendered as an `<a>` tag by default -->

<router-link to="/foo">Home page</router-link>

<router-link to="/bar">About Us</router-link>

<router-link to="/bar">Contact Us</router-link>

</p>

<!-- component matched by the route will render here -->

<router-view></router-view>

</div>

JAVASCRIPT

// 0. If using a module system (e.g. via vue-cli), import Vue and VueRouter // and then call `Vue.use(VueRouter)`.

// 1. Define route components.

// These can be imported from other files

const Home= { template: '<div>Home page</div>' }

const AboutUs = { template: '<div>About us</div>' }

const ContactUs = { template: '<div>Contact us</div>' }

// 2. Define some routes

// Each route should map to a component. The "component" can

// either be an actual component constructor created

const routes = [

{ path: '/Home', component: Home},

{ path: '/About ', component: AboutUs }

{ path: '/Contact ', component: ContactUs }

]

// 3. Create the router instance and pass the `routes` option

const router = new VueRouter({

routes

})

// 4. Create and mount the root instance.

// Make sure to inject the router with the router option to make the

// whole app router-aware.

const app = new Vue({

router

}).$mount('#app')

here is JSfiddler for you