真的很困惑为什么这不起作用。我只是详细说明从 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>
路由器/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>