2017-02-05 11 views
1

vue.jsをvue-routerとともに使用したいが、onclickが動作しない。 App.vueでonclickイベントがvue-routerで動作しないのはなぜですか?

:私は上記のようなHello.vueを接続した場合

<template> 
    <div id="app"> 
    <hello></hello> 
    <router-view></router-view> 
    </div> 
</template> 
<script> 
import hello from './components/hello/Hello.vue' 

export default { 
    name: 'app', 
    components: { 
    hello 
    } 
} 
</script> 
<style>...</style> 

、私は(多分別の、あまりにも、私は試すことができない)のonclickイベントを使用することはできません。ボタンをクリックしても何も起こりません。

が、私は、ルータにHello.vueを接続した場合:

その後、main.js↓

import Vue from 'vue' 
import App from './App.vue' 
import VueRouter from 'vue-router'; 
import hello from './components/hello/Hello.vue' 

new Vue({ 
    el: '#app', 
    template: '<App/>', 
    components: { App } 
}); 

Vue.use(VueRouter); 

const routes = [ 
    { 
    path: '/hello', 
    name: 'hello', 
    component: hello 
    }, 
]; 

var router = new VueRouter({ 
    mode: 'history', 
    base: __dirname, 
    routes 
}); 

const app = new Vue({ 
    router 
}).$mount('#app'); 

ボタンの作品を!ルータにないコンポーネントをどのように使用できますか?たとえば、Hello.vueをtopMenu.vueに変更します。私はサイトのすべてのページでメニューを使用したいが、私は各ページのコンポーネントに重複したメニューを望んでいない、それはドライではない!

答えて

1

答えが見つかりました。私のコードでは、私はちょうど置き換え、とても簡単でした:

const app = new Vue({ 
    router 
}).$mount('#app'); 

で:

const app = new Vue({ 
    router, 
    render: function(createElement){ 
     return createElement(App) 
    } 
}).$mount('#app') 
関連する問題