vuejs 구성 요소에 $ route가 없습니다. 뭐가 문제 야?

Question

저는 초보자입니다. 단일 파일 .vue에서 첫 번째 vuejs 구성 요소를 시작했습니다.

경로의 매개 변수를 가져오고 싶습니다. 그러나 "this"에는 $ route가 없습니다. 이 창이 있습니다. 누군가 나를 이해하는 데 도움이 될 수 있습니까? 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를 가진 객체가 아니라 window 객체를 제공합니다. 어디서 문제가 있는지 모르겠다. SOS :-)

감사합니다.

Answer 1

이 경우 getPlaylist 함수는 단지 일반적인 함수이며 this 키워드에 바인딩되지 않습니다. 첫눈에 반 직관적 일지라도 Vue는 내 보낸 구성 객체 (module.exports = { ... })의 메소드에만 구성 요소의 컨텍스트를 바인딩 할 수 있으므로 this을 사용할 수 있습니다. data 함수 안에 있지만 getPlaylist에는 없습니다. 당신이 정말로 설정 객체의 외부 기능에 this 필요한 경우

, 당신은 이런 식으로 뭔가를해야 할 것이다 :

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

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