vue.js this.$router 未定义

Question

我变得不确定

这个.$路由器

在 App.vue 和其他组件中未定义。我找不到解决办法。

这是我的 main.js 的一部分

Vue.use(VueRouter);
Vue.use(VueResource);

const router = new VueRouter({
    routes: Routes,
    mode: 'history'
});

new Vue({
    el: '#app',
    render: h => h(App),
    router
});

这是我在 main.js 中导入的 router.js。

 export default [
    {path: '/', component: Home, name: 'home'},
    {path: '/home', component: Home, name: 'home2'},
    {path: '/user/login', component: Login, name: 'userLogin'}
];

谢谢 ：）

编辑

我在这样的脚本标签中使用它，

 <script>
    import HeadNavBar from './components/HeadNavBar.vue';
    import SideBarNav from './components/SideBarNav.vue';
    import Home from './components/Home.vue';

    console.log(this.$router,pus); //the undefined type

    export default {
        name: 'app',
        data() {
            return {
                isLogin: true
            }
        },
        components: {
            'app-headnav': HeadNavBar,
            'app-sidebarnav': SideBarNav,
            'app-home': Home
        }

    }
</script>

但是当我把它移到方法部分时，我得到了我想要的响应。

 export default {
    name: 'app',
    data() {
        return {
            isLogin: true
        }
    },
    components: {
        'app-headnav': HeadNavBar,
        'app-sidebarnav': SideBarNav,
        'app-home': Home
    },methods: {
        myFunc: function() {
            console.log(this.$router,pus); // this gave result
        }
    }
}

原文由 sudo 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我只能重现 undefined 错误 this.$router 在使用 箭头函数 时（也许这就是你正在做的）， Vue 文档 建议不要这样做：

不要在选项属性或回调上使用箭头函数，例如 created: () => console.log(this.a) 或 vm.$watch('a', newValue => this.myMethod()) 。由于箭头函数绑定到父上下文， this 不会是您期望的 Vue 实例，通常会导致错误，例如 Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function .

这是 mounted 回调日志 this.$router 成功的示例：

 <script>
  export default {
    name: 'app',

    // DON'T USE ARROW FUNCTIONS HERE
    // mounted: () => {
    //   console.log({router: this.$router});
    // },

    mounted() {
      console.log({router: this.$router});
    }
  }
</script>

原文由 tony19 发布，翻译遵循 CC BY-SA 4.0 许可协议