vuejs2 - vuejs 组件中没有 $route 。怎么了？

Question

我是 vuejs 的初学者。我在单个文件 .vue 上启动了我的第一个 vuejs 组件。

我想获得路线的参数。但是“this”没有$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 中，我希望在 this.$route.params 上使用 userId，我有：

<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.

如果您确实需要this配置对象之外的函数，则必须执行以下操作：

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

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