Vue-Router仅适用于某些路线

Question

My vue-router routes the URL on all menu buttons correctly, but does not show each Vue component properly. A demonstration can be found here .

Inside of my HTML (I am using Vuefy)

<div class="navbar-start">
        <a class="navbar-item">
          <router-link to="/" class="router-link">  // <-- THIS WORKS
          Home
        </router-link>
        </a>
        <a class="navbar-item">
          <router-link to="/items" class="router-link">  // <-- THIS WORKS
          My Products
        </router-link>
        </a>
      <div class="navbar-item has-dropdown is-hoverable">
          <a class="navbar-link">
            <router-link to="/information" class="router-link">  // <-- DOES NOT WORK
            Info
            </router-link>
          </a>
        <div class="navbar-dropdown is-boxed">
          <a class="navbar-item">
            <router-link to="/about" class="router-link">  // <-- THIS WORKS
            About
            </router-link>
          </a>
          <a class="navbar-item">
            <router-link to="/terms" class="router-link">  // <-- DOES NOT WORK
            Terms
          </router-link>
          </a>
        </div>
      </div>
    </div>

My router.js file is set up the following:

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/about',
      name: 'about',
      component: () => import('./views/About.vue')
    },
    {
      path: '/new',
      name: 'create-item',
      component: () => import('./views/CreateItem.vue')
    },
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/items',
      name: 'my-items',
      component: () => import('./views/MyItems.vue')
    },
    {
      path: '/signin',
      name: 'sign-in',
      components: () => import('./views/SignIn.vue')
    },
    {
      path: '/terms',
      name: 'terms',
      components: () => import('./views/Terms.vue')
    },
    {
      path: '/information',
      name: 'info',
      components: () => import('./views/Info.vue')
    }
  ]
})

Additionally, my App.vue file shows the router-view properly, along with the menu.

<template>
  <div id="app">
    <div id="nav">
      <Menu/>
    </div>
    <router-view/>
  </div>
</template>

<script type="text/javascript">
    import Menu from '@/components/Menu.vue'

    export default {
      components: {
        Menu
      }
    }
</script>

The following is a photograph of my navigation. To repeat, clicking on 'info' and 'terms' (submenu of info) do not load their respective Vue components, but does change the URL.

I triple-checked my syntax and checked the documentation, but could not seem to find my error. The platform at which my code is hosted at can be found here . Any help would be appreciated. Thanks, Edwin.

Answer 1

I found the error. I spelled 'component' instead of 'components' several times in my routes.js file.