Cacher is the code snippet organizer for pro developers

<template>
  <div> 
    <ul class="nav">
        <li class="nav-item">
            <!-- 'router-link' prevents page refresh -->
            <!-- use 'exact' to allow highlighting exact link with css -->
            <router-link to="/" class="nav-link" exact>Blog</router-link> 
        </li>
        <li class="nav-item">
            <router-link to="/add" class="nav-link" exact>Add a New Blog</router-link>
        </li>
    </ul>
  </div>
</template>

<script>
export default {
  // ...
</script>

<style scoped>
    a {
        color: grey;
    }
    .router-link-active {
        color: #007bff;
    }
</style>

<template>
  <div class="container">
    <app-header></app-header> <!-- header component will have navbar with router-links -->
    <router-view></router-view> <!-- Add 'router-view -->
  </div>
</template>

<script>

import header from './components/header.vue';
import addBlog from './components/addBlog.vue';
import showBlogs from './components/showBlogs.vue';
import listBlogs from './components/listBlogs.vue';

export default {
  components: {
    'add-blog': addBlog,
    'show-blogs': showBlogs,
    'list-blogs': listBlogs,
    'app-header': header
  },
  // ...
  // ...

import showBlogs from './components/showBlogs.vue';
import addBlog from './components/addBlog.vue';

export default [
    // each object in array will be a different route
    { path: "/", component: showBlogs }, // root
    { path: "/add", component: addBlog }
]

// ...
import VueRouter from 'vue-router' // import [vue-router] 'npm install vue-router --save'
import Routes from './routes' // import Routes from routes.js

// Router
Vue.use(VueRouter);
const router = new VueRouter({
  routes: Routes, // register routes
  mode: 'history' // 'hash' is default (#)
});

new Vue({
  el: '#app',
  render: h => h(App),
  router: router // use router in Vue instance
})