Cacher is the code snippet organizer for pro developers

// import components

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import {routes} from './routes.js'

// Important: Setup vue-router
Vue.use(VueRouter);

const router = new VueRouter({
  routes,
  mode: 'history'
})

new Vue({
  el: '#app',
  router, // Register router in the vue object 
  render: h => h(App)
})

// import components

import User from './components/user/User.vue'
import Home from './components/Home.vue'

export const routes = [
    { path: '', component: Home },
    { path: '/user/:id', component: User}
];

<template>
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
                <h1>Routing</h1>
                <app-header></app-header>
                <hr>
                <!-- This is where the component will be rendered depending on the route -->
                <router-view></router-view>
            </div>
        </div>
    </div>
</template>

<script>
    import Header from './components/Header.vue'

    export default {
        components: {
            'app-header': Header
        }
    }
</script>

<style>
</style>

<template>
    <div>
        <h1>The Home Page</h1>
        <hr>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab asperiores, aut autem, blanditiis consequuntur
            dolore excepturi laborum maiores minima nihil non nulla obcaecati quas quibusdam quod sed suscipit vero
            voluptatem.</p>

    </div>
</template>

<template>
	<div>
		<h1>The User Page</h1>
        <button @click="navigateToHome" class="btn btn-primary">Go to Home</button>
	</div>
</template>

<script>
    export default {
        methods: {
            navigateToHome() {
                // Navigate back to home route
                this.$router.push('/') // This pushes '/' on top of the stack of routes
                // This is also a way to navigate routes dynamically
            }
        }
    }
</script>

<template>
	<div>
		<ul class="nav nav-pills">
            <!-- This is how to navigate routes -->
            <li role="presentation"><router-link to="/">Home</router-link></li>
            <li role="presentation"><router-link to="/user/10">User</router-link></li>
        </ul>
	</div>
</template>