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

Posted 2023-02-22

【中文标题】为啥 onclick 事件不适用于 vue-router？

【英文标题】：Why onclick event doesn't work with vue-router?为什么 onclick 事件不适用于 vue-router？

【发布时间】：2017-06-22 13:37:20

【问题描述】：

我想在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！

【参考方案1】：

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

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

与：

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