Vue.js路由未处理任何方法

Vue.js routing no method handled

本文关键字：任何 方法 未处理 路由 js Vue      更新时间：2024-05-25

我在Vue.js和他的路由系统上遇到了一些问题。我在这里举了一个例子。

为什么当我使用模板（请参阅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>

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

注意，所提供的元件仅仅用作安装点；如果还提供了模板，则它将被替换，除非replace设置为false。解析的元素将作为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在Foo作用域中汇编，#bar在Bar作用域中编辑。

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

    var Bar=Vue.extend({模板："#bar"，

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

    })

  2. 你（ab）在应用程序主模板中使用了一个常规的HTML元素作为组件的子模板——这不是你应该做的

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

因此控制台中出现错误：

[Vue warn]：v-on:click="bar"需要一个函数值，得到了未定义的

模板应该是这样的：

<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>
相关文章：