ヴュー-CLIのWebPACK

でVueRouterをインストールし、私はVUE-CLIコマンドを使用して、新鮮なプロジェクトを作成しました。ここでヴュー-CLIのWebPACK

は私 main.js次のとおりです。ここで

import Vue from 'vue' 
import VueRouter from 'vue-router' 
import App from './App' 

var Foo = Vue.extend({ 
    template: '<p>This is foo!</p>' 
}) 

var Bar = Vue.extend({ 
    template: '<p>This is bar!</p>' 
}) 

Vue.use(VueRouter) 

const router = new VueRouter() 

router.map({ 
    '/foo': { 
    component: Foo 
    }, 
    '/bar': { 
    component: Bar 
    } 
}) 

router.start(App, '#app') 

/* eslint-disable no-new */ 
new Vue({ 
    el: 'body', 
    components: { App } 
}).$mount('#app')

がある私の index.html：

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>shivaminyanim.com</title> 
    </head> 
    <body> 
    <app></app> 
    <!-- built files will be auto injected --> 
    </body> 
</html>

そして、ここで私のApp.vue：

<template> 
    <div id="app"> 
    <h1>Hello App!</h1> 
    <p> 
     <!-- use v-link directive for navigation. --> 
     <a v-link="{ path: '/foo' }">Go to Foo</a> 
     <a v-link="{ path: '/bar' }">Go to Bar</a> 
    </p> 
    <!-- route outlet --> 
    <router-view></router-view> 
    </div> 
</template>

私が何であれ、私がように見えることはできませんそれを働かせる方法を見つけ出す。今、私は、任意のコンソールエラーを得ることはありませんが、ブラウザだけで

はそれぞれ、すべてのルートの/ fooの

を取得することはできません表示されます。私が始めることができますどのように "^ 0.7.13"、

： "^ 1.0.21"
"VUE-ルータ"：私は現在、

"VUE"
を使用しています

vue-router？

出典

2016-09-18 tam5

ブートストラップされたVueインスタンスにルータを追加する必要があります（main.js）。このような例：

のVue 2.0とVueのルータ2.0

new Vue({ 
    router, 
    el: '#app', 
    render: h => h(App) 
})

のVue 1.0とVueのルータ< 2.0

router.start({ 
    components: { App } 
}, '#app')

出典

2016-09-19 05:58:51

を@Primozねえ、私はあなたが私が必要とする権利であることを確認していますルータを含める。しかし、私はまだ別の何かが間違っているように見えるので、同じエラーが発生しています。私は 'router.start'を含むように質問を更新します。私はあなたが私と同じ手順に従えば、エラーを再現できるはずです。これ以上の助けをいただければ幸いです！ – tam5

'vue'と' vue-router'のどちらのバージョンを実行していますか？デフォルトのルートは動作していますか（例えば、 'http：// localhost：8080'）、'/foo'のようなサブルーチンだけですか？ –

私はそれを含めるように質問を更新しました。デフォルトルートは機能していません。（これは私の 'main.js'に' vue-router'を追加する前です – tam5

答えて

関連する問題