Warum Onclick-Ereignis nicht mit Vue-Router funktioniert?

Question

Ich möchte vue.js mit Vue-Router verwenden, aber der Onclick funktioniert nicht.

in 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> 

Wenn ich Hello.vue wie oben anschließen, kann ich Onclick-Ereignis nicht verwenden (vielleicht auch ein anderes, kann ich nicht versuchen). Nach einem Klick auf den Button passiert nichts.

aber wenn ich eine Verbindung Hello.vue Router:

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'); 

dann die Taste funktioniert! Wie ich Komponenten nicht im Router verwenden kann. Ändern Sie beispielsweise Hello.vue zu topMenu.vue. Ich möchte Menü auf allen Seiten vor Ort verwenden, aber ich möchte kein doppeltes Menü in jeder Seite Komponente, es ist nicht trocken!

Answer 1

Ich fand die Antwort.

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

mit:

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

Es war so einfach, in meinem Code ich nur ersetzt