Question

真的很困惑为什么这行不通。我只是在详细说明您从CLI添加路由器得到的示例。我只想添加一个新的通用路由调用，我创建了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

然后查看/common.vue

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

Answer 1

问题是您的路径为'/ commmon'，路径为3'm。

但是我建议您按名称呼叫该路线。

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

VueJS路由器未加载组件

1 个答案: