ルーターテンプレートから関数を呼び出す方法は？

Question

私は非常に単純なページをURLの切り替えとしています。 URLの1つでは、@clickメソッドに電話する必要があります。ここに私のコードです：

const NotFound = { template: '<p>Page not found</p>' } 
const Home = { template: '<p>home page</p>' } 
const Faq = { template: '<p>Faq page</p>' } 
const Book = { template: ` 
<div> 
    <button @click="foo()">test</button> 
</div> 
    ` } 
const routes = [ 
    {path: '/', component: Home}, 
    {path: '/book', component: Book}, 
    {path: '/faq', component: Faq} 
] 

const router = new VueRouter({ 
    routes // short for `routes: routes` 
    }) 

new Vue({ 
    el: '#app', 
    router, 
    data: { 

    }, 
    methods: 
    { 
    foo() 
    { 
     console.log("ffffff"); 
    } 
    } 
}) 

しかし、私はエラーが発生します：Property or method "foo" is not defined on the instance but referenced during render。

Answer 1

親コンポーネントで子コンポーネント（ブック）のメソッドを定義しようとしているためです。メソッドのプロパティを親コンポーネントから子コンポーネントに移動してください。 ここにサンプルがあります。

const NotFound = { template: '<p>Page not found</p>' } 
 
const Home = { template: '<p>home page</p>' } 
 
const Faq = { template: '<p>Faq page</p>' } 
 
const Book = { template: ` 
 
<div> 
 
    <button @click="foo()">test</button> 
 
</div> 
 
    ` 
 
    , methods: // <-- here you go 
 
    { 
 
    foo() 
 
    { 
 
     console.log("ffffff"); 
 
    } 
 
    }} 
 
const routes = [ 
 
    {path: '/', component: Home}, 
 
    {path: '/book', component: Book}, 
 
    {path: '/faq', component: Faq} 
 
] 
 

 
const router = new VueRouter({ 
 
    routes // short for `routes: routes` 
 
    }) 
 

 
Vue.use(VueRouter); 
 

 
new Vue({ 
 
    el: '#app', 
 
    router, 
 
    data: { 
 

 
    } 
 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/2.7.0/vue-router.min.js"></script> 
 
<div id="app"> 
 
    <router-link :to="{ path: '/' }">Home</router-link> 
 
    <router-link :to="{ path: '/faq' }">FAQ</router-link> 
 
    <router-link :to="{ path: '/book' }">book</router-link> 
 
    <router-view></router-view> 
 
</div>