VueJS 路由器不加载组件

Question

真的很困惑为什么这不起作用。我只是详细说明从 CLI 添加路由器获得的示例。我只想添加一个新的路由调用 common 并且我创建了一个 Common.vue 文件并将 HTML 从 About.vue 复制到其中。一定是遗漏了什么愚蠢的东西，但它是什么？

在 app.vue 我有

<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

然后是views/common.vue

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

Answer 1

问题是你的路径是'/common'，有3个'm'。

但我建议您按名称调用路由。

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

VueJS 路由器不加载组件

VueJS router does not load the component

vue.js

routing

vuejs-routing