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

Question

我是 vuejs 的初学者。我在单个文件 .vue.

上启动了我的第一个 vuejs 组件

我想获取路由的参数。但是 "this" 没有 $route。这是 Window。有人可以帮助我理解吗？

在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(this) 给我 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>

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

No $route on this in a vuejs component. what's wrong?

vuejs2