VueJSルータはコンポーネントをロードしません。

VueJSルータを使用していますが、ルータがコンポーネントをロードしていません。VueJSルータはコンポーネントをロードしません。

私はちょうどテストにタグをAbout.vueとContact.vueを持っている - 次は、それがどのように見えるかです：

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

これは3ルータ・リンクとrouter-と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>

これはこれは、ルータのJSファイルです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 
    } 
});

です。 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以外のメインページから何も変わりません。 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ルータはコンポーネントをロードしません。

答えて

関連する問題