为什么 onclick 事件不适用于 vue-router？

Question

我想在vue-router上使用vue.js，但是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。我想在网站上的所有页面上使用菜单，但我不想在每个页面组件中使用重复的菜单，它不是 DRY！

Answer 1

我找到了答案。很简单，在我刚刚替换的代码中：

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

与：

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