VueJS router does not load the component

Question

Really confused why this isnt working. I am just elaborating on the example that you get from adding router from the CLI. I just want to add a new route call common and i created a Common.vue file and copied the HTML from About.vue into it. Must be missing something stupid but what is it?

In app.vue i have

<template>
<div class="container">
    <div id="app">
        <Header />

        <div id="nav">
            <router-link to="/">Home</router-link> |
            <router-link to="/about">About</router-link> |
            <router-link to="/common">Common</router-link>
        </div>
        <router-view />

        <!--<testApi v-bind:artists="artists"/>-->
        <messaging />
    </div>
</div>

router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import Common from '../views/Common.vue'
import About from '../views/About.vue'


Vue.use(VueRouter)

const routes = [
    {
    path: '/',
    name: 'home',
    component: Home
    },
    {
    path: '/about',
    name: 'about',
    component: About
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    //component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
    },
    {
    path: '/commmon',
    name: 'common',
        component: Common
    }
]

const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes
})

export default router

and then views/common.vue

<template>
  <div class="common">
    <h1>This is an COMMON page</h1>
  </div>
</template>

Answer 1

The problem is that your path is '/commmon', with 3 'm's.

But I sugest you to call the route by name.

<router-link :to="{ name: 'common' }">Common</router-link> |