Vue.js路由没有处理方法

Question

我在使用 Vue.js 和他的路由系统时遇到了一些麻烦。我做了一个例子here。

为什么当我使用模板（参见 Foo）时方法可以正确附加，而当我使用 el（参见 Bar）时为什么不能？

这是他的代码：

index.js

var Foo = Vue.extend({
    template: '<p v-on:click.prevent="foo">This is foo!</p>',

  methods: {
      foo: function(){
        alert('YEAH')
      }
    }
})

var Bar = Vue.extend({
    el: function(){
      return '#bar'
    },

    methods: {
      bar: function(){
        alert('YEAH')
      }
    }
})

var App = Vue.extend({})

var router = new VueRouter()

router.map({
    '/foo': {
        component: Foo
    },
    '/bar': {
        component: Bar
    }
})

router.start(App, '#app')

index.html

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- use v-link directive for navigation. -->
    <a v-link="{ path: '/foo' }">Go to Foo</a>
    <a v-link="{ path: '/bar' }">Go to Bar</a>
  </p>
  <div id="bar" v-bind:class="$route.path == '/bar' ? '' : 'hidden'">
    <p v-on:click.prevent="bar">This is bar!</p>
  </div>
  <!-- use router-view element as route outlet -->
  <router-view></router-view>
</div>

Answer 1

您应该使用 template: '#bar' 而不是 el: '#bar' el 选项不是模板的选择器。

var 栏 = Vue.extend({ 模板：'#bar'，
```
methods: {
  bar: function(){
    alert('YEAH')
  }
}
```
})
您（ab）在 Apps 主模板中使用了常规 HTML 元素作为组件的子模板 - 这不是您应该做的事。

这也是点击事件不起作用的原因：div 的内容，包括点击事件，是由 App 组件计算的，而不是 Bar 组件。而 App 组件没有 "bar" 方法。

因此控制台出现错误：

[Vue warn]: v-on:click="bar" expects a function value, got undefined

模板应如下所示：

<script type="x-template" id="bar">
  <div>
    <p v-on:click.prevent="bar">This is bar!</p>
  </div>
</script>

<!-- or with HTML5 template tag: -->
<template id="bar">
  <div>
    <p v-on:click.prevent="bar">This is bar!</p>
  </div>
</template>

Answer 2

您误解了 el 的目的。当您将 el 传递给组件时，它会告诉 Vue 将自己挂载在哪个元素上

Note that the provided element merely serves as a mounting point; it will be replaced if a template is also provided, unless replace is set to false. The resolved element will be accessible as vm.$el.

实际上 #bar 中没有 Vue 可以编译的模板，这就是你没有输出的原因。在另一个 Vue 的 el（在你的例子中是 #app）中使用 el 也是一个坏主意。 v-on:click.prevent="bar" 位在父级（App 实例）范围内编译，并且由于 App 没有 bar 方法，您会收到警告。

更好的解决方案： http://codepen.io/anon/pen/zqWKrg

请注意，现在每个组件都有自己的模板，您可以清楚地看到每个组件的范围：#app 在 App 范围内编译，#foo 在 [=23] 范围内编译=]范围和#bar在Bar范围内编译。

Vue.js路由没有处理方法

Vue.js routing no method handled

javascript

vue.js

vue-router