Почему событие onclick не работает с vue-router?

Question

Я хочу использовать vue.js с vue-router, но onclick не работает.

в App.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> 

Если я подключаю Hello.vue, как и выше, я не могу использовать 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. Я хочу использовать меню на всех страницах сайта, но я не хочу дублировать меню в каждом компоненте страницы, это не СУХОЙ!

Answer 1

Я нашел ответ. Это было так легко, в моем коде, я просто заменил:

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

с:

const app = new Vue({ 
    router, 
    render: function(createElement){ 
     return createElement(App) 
    } 
}).$mount('#app')