VueJS路由器不加载组件

我正在使用VueJS路由器，但路由器没有加载组件。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/contact

http://localhost:8080/about

，但不加载我进口的组件。

如果您需要更多信息以提供建议，请随时提问。如果您有任何关于此问题的线索，我很感激您在这里分享。

谢谢。

来源

2017-09-01 Kate Yeeum Lee

对象键VueRouter预计被称为routes，您通过它routers。

尝试......

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

另外，重命名“路由器”变量“路线”。例如

export const routes=[

和

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

来源

2017-09-01 03:59:47 Phil

谢谢你这么多@Phil，问题就迎刃而解了！ :) –

VueJS路由器不加载组件

回答

相关问题