VueJS 路由器不加载组件答案

【问题标题】：VueJS Router doesn't load the componentVueJS 路由器不加载组件
【发布时间】：2018-02-10 02:06:01
【问题描述】：

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

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

<template>
  <div>
    <h1>Contact page. Welcome baby!</h1>
  </div>
</template>

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

<template>
   <div>
     <h1>Routing</h1>
     <router-link to="/">Home</router-link>
     <router-link to="/about">About</router-link>
     <router-link to="/contact">Contact</router-link>
     <router-view></router-view>
  </div>
</template>

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

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import {routers} from './router'

Vue.use(VueRouter);

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

new Vue({
    el:'#app',
    router,
    components: {
      'app-home' : App
    }
});

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

import About from './About.vue'
import Contact from './Contact.vue'
import Home from './App.vue'

export const routers=[
    {
      path: '/' , component: Home
    },
    {
      path:'/about',component:About
    },
    {
      path:'/contact',component:Contact
    }
]

而且，这是 index.html

<!DOCTYPE html>
<html lang="en">
 <head>
    <meta charset="utf-8">
    <title>router</title>
 </head>
 <body>
    <div id="app">
       <app-home></app-home>
    </div>
  <script src="/dist/build.js"></script>
 </body>
</html>

当我加载页面时，主页面如下所示：

当我单击每个导航时，除了 URL 之外，主页没有任何变化。网址变成

http://localhost:8080/联系方式

http://localhost:8080/about

但没有加载我导入的组件。

如果您需要更多信息来提供建议，请随时询问。如果您对这个问题有任何线索，如果您在这里分享，我将不胜感激。

谢谢。

【问题讨论】：

标签： vue.js vue-component vue-router

【解决方案1】：

就我而言，我必须使用"Manually select features" 创建一个新的 Vue 项目 (vue create Project)；然后我必须标记"Router"。

之前我使用默认值创建了一个项目，并且我已经单独安装了路由器 (npm install vue-router) - 但最后路由没有加载组件。

ps。我用：

npm 6.14.6
nodejs v12.18.3
@vue/cli 4.5.4

【讨论】：

【解决方案2】：

我的症状与 OP 相同，但使用的是 netlify 和 gridsome（它使用 vue.js。在我的情况下，原因是错误标记的联系表单。

【讨论】：

【解决方案3】：

VueRouter 期望的对象键名为 routes，您正在传递它routers。

试试这个...

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

或者，将您的 "routers" 变量重命名为 "routes"。例如

export const routes=[

和

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

【讨论】：