javascript - 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

您误解了 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 中使用 el(在您的情况下为#app)也是一个坏主意。 v-on:click.prevent="bar" 位在父级(App 实例)范围内编译，并且由于 App 没有 bar 方法你会收到警告。

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

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