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路由器不加載組件

回答

相關問題