Vue - router #vue2 #router

FrontendGuide.vue

<template>
  <div id="frontend-guide">

    <h1>Front-end Guide</h1>

    <router-link to="/frontend-guide/buttons">Buttons</router-link>
    <router-link to="/frontend-guide/grid">Grid</router-link>

    <!-- children routes work here -->
    <router-view/>

  </div>
</template>

router-index.js

// https://jsfiddle.net/yyx990803/L7hscd8h/
// fork: https://jsfiddle.net/frankyonnetti/2vfq30xs/

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('../views/Home.vue')
  },
  {
    path: '/frontend-guide',
    name: 'FrontendGuide',
    component: () => import('../views/FrontendGuide.vue'),
    // children within FrontendGuide <router-view>.
    children: [
      {
        path: 'buttons',
        name: 'Buttons',
        component: () => import('../views/Buttons.vue')
      },
      {
        path: 'grid',
        name: 'Grid',
        component: () => import('../views/Grid.vue')
      }
    ]
  }
]

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

export default router