Нет $ route на этом в компоненте vuejs. что не так?

Question

Я начинаю с vuejs. Я начал свой первый компонент vuejs в одном файле .vue.

Я хотел получить параметр маршрута. Но «это» не имеет $ route. это окно. Кто-нибудь может помочь мне понять?

В main.js я настроил маршрутизатор с:.

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>' 
}); 

В songbook.vue, где я надеюсь использовать USERID на этом $ 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 (это) дает мне объект window, а не объект с $ route. Я не вижу, где проблема ... 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>