javascript - 为什么 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')