これにvuejsコンポーネントの$ routeはありません。どうしましたか？

Question

私はvuejsで初心者です。 最初のvuejsコンポーネントを1つのファイル.vueで起動しました。

私はルートのパラメータを取得したいと考えていました。しかし、 "this"には$ルートがありません。これはウィンドウです。 誰かが私に理解を助けることができますか？ main.jsで

が、私はルータを設定し：。私は、この上で使用するユーザーIDを願っていますsongbook.vueで

var Vue = require('vue'); 
var VueRouter = require('vue-router'); 

Vue.use(VueRouter); 

const Home = require('./components/home.vue'); 
const Songbook = require('./components/songbook.vue'); 

var router = new VueRouter({ 
    routes: [{ 
     path: '/', 
     component: Home 
    }, { 
     path: '/songbook/:userId', 
     component: Songbook 
    }] 
}); 

const app = new Vue({ 
    router: router, 
    el : '#app', 
    template : '<router-view></router-view>' 
}); 

、$ route.paramsを、私が持っている：

<template> 
<div> 
    <h1>Songbook</h1> 
</div> 
</template> 

<script> 

var getPlaylists = function() { 
    console.log(this); 
}; 

getPlaylists(); 

module.exports = { 
    data: function() { 
     return { 
     } 
    } 
} 
</script> 

console.log（this）は、$ routeを持つオブジェクトではなく、ウィンドウオブジェクトを返します。私はどこに問題があるのか​​わかりません... SOS :-)

おめでとうございます。

Answer 1

この場合、getPlaylistの機能は単なる通常の機能であり、thisキーワードにバインドされていません。一見すると直感的ではないかもしれませんが、Vueはエクスポートされた設定オブジェクト（module.exports = { ... }）のメソッドにのみコンポーネントのコンテキストをバインドできるため、thisが利用可能になります。 data機能内にありますが、getPlaylistにはありません。

あなたが本当にconfigオブジェクトの外側の関数でthisが必要な場合、あなたはこのような何かをする必要があります：

<script> 
    var getPlaylists = function() { 
     console.log(this); 
    }; 

    module.exports = { 
     data: function() { 
      getPlaylists.call(this); // supply context to getPlaylists() 
      return { }; 
     } 
    } 
</script>