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

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

1 个答案: