Vue.js VueJS路由器不'；不要加载组件

我正在使用VueJS路由器，但路由器没有加载组件

我有About.vue和Contact.vue要测试的标签-下面是它的样子：

联系页面。欢迎宝贝！

这是App.vue，有三个路由器链接和路由器视图

路由
家
关于
接触

这是main.js（导入文件的路径正确）

从“Vue”导入Vue
从“./App.vue”导入应用程序
从“vue路由器”导入VueRouter
从“./router”导入{routers}
Vue.use（VueRouter）；
let router=new VueRouter（{mode:'history'，routers}）；
新Vue({
el:“#应用程序”，
路由器，
组成部分：{
“应用程序主页”：应用程序
}
});

这是路由器的JS文件router.js（路径正确）

import About from./About.vue'
从“/Contact.vue”导入联系人
从“/App.vue”导入主页
导出常量路由器=[
{
路径：“/”，组件：主
},
{
路径：'/about'，组件：about
},
{
路径：'/contact'，组件：contact
}
]

这是index.html

路由器

当我点击每个导航时，除了URL，主页上没有任何变化。
URL变成

http://localhost:8080/contact

http://localhost:8080/about

但没有加载我导入的组件

如果你需要更多的信息来提供建议，请随意询问更多。
如果你对这个问题有任何线索，我感谢你在这里分享

谢谢。
所需的对象键
VueRouter
被称为
routes
，您正在传递它
routers

试试这个

let router = new VueRouter({mode: 'history', routes: routers});


或者，将“路由器”变量重命名为“路由”。乙二醇

及

我的症状与OP相同，但使用netlify和gridsome（使用vue.js。在我的情况下，这是一个标记错误的联系人表单造成的。
在我的情况下，我必须创建一个新的vue项目（
vue create project
），带有
“手动选择功能”
；然后我必须标记
“路由器”

以前，我创建了一个默认项目，并单独安装了路由器（
npm install vue router
）——但最后路由没有加载组件

注：我使用：


npm 6.14.6
nodejsv12.18.3
@vue/cli 4.5.4

export const routes=[

import {routes} from './router'
// snip
let router = new VueRouter({mode: 'history', routes });