VueJS路由器不加载组件

时间:2017-09-01 03:31:17

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

我正在使用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>

当我加载页面时,主页面如下所示: Loaded Main page

当我单击每个导航时,除了URL之外,没有任何内容从主页面更改。 网址变为

http://localhost:8080/contact

http://localhost:8080/about

但未加载我导入的组件。

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

谢谢。

3 个答案:

答案 0 :(得分:7)

预期的对象键VueRouter被称为routes,您传递的是routers

试试这个......

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

或者,将&#34;路由器&#34; 变量重命名为&#34;路由&#34; 。例如

export const routes=[

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

答案 1 :(得分:0)

我的症状与OP相同,但是使用的是netlify和gridsome(使用vue.js。在我的情况下,这是一个带有错误标签的联系表,这就是原因。

答案 2 :(得分:0)

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

以前,我已经创建了一个具有默认值的项目,并且分别安装了路由器(npm install vue-router)-但最后,路由没有加载组件。

ps。我使用:

  • npm 6.14.6
  • nodejs v12.18.3
  • @ vue / cli 4.5.4