Javascript vue.js此。$router未定义

我正在变得不确定

这是$router

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>

---

当使用时，我只能为

this.$router

重现

未定义的
错误（可能这就是您正在做的），建议您不要：

不要在选项属性或回调上使用箭头函数，例如
created:（）=>console.log（this.a）
或
vm.$watch（'a'，newValue=>this.myMethod（））
。由于箭头函数绑定到父上下文，
此
将不会像您预期的那样成为Vue实例，通常会导致错误，例如
未捕获类型错误：无法读取未定义的属性
或
未捕获类型错误：this.myMethod不是函数

下面是一个成功安装的
回调日志
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>


导出默认值{
名称：“应用程序”，
//这里不要使用箭头函数
//挂载：（）=>{
//log（{router:this.$router}）；
// },
安装的（）{
log（{router:this.$router}）；
}
}
导入组件时，执行导出上方的
控制台.log（this.$router，pus）
。它发生在组件创建之前。所以
这个
只是一个空对象
{}

您应该在导出对象的方法中获得
this.$router
 我知道这很古老，但我会分享我遇到的一些事情，以及我是如何摆脱它的，以防有人在那里挣扎

我的场景是一个vue/meteor项目

在函数/处理程序中，“this”指函数的目标，因此，$router在函数或目标本身中查找$router

    ///////DOESN'T WORK ///////////
  mounted: function () {
    $(document).on('click', '.element', function(){
             //this is recognized as 
             this.$router.push(PATH)
        });
  },


    ////////THIS WORKS//////////
  mounted: function () { 
    //make router defined outside of function.
    var navigate = this.$router;

     $(document).on('click', '.element', function(){
        navigate.push(PATH)
     });
  }

我们有一个相同的错误，在这种情况下，我已经修复了，我只是像这样导入我的组件中的路由器文件，它正在工作：

在我的组件中导入路由器文件/配置：

import router from '../router'

我可以这样使用：

router.replace('home')

这应该是可行的

我的完整代码：

<script>
import router from '../router'
export default {
  methods: {
  signIn: function () {
    firebase
    .auth().signInWithEmailAndPassword(this.email, this.password).then(
      function (user) {
        router.replace('home')
      },
      function (err) {
        alert('Maaf, ' + err.message)
      }
    )
  }
 }
}
</script>


从“../router”导入路由器
导出默认值{
方法：{
签名：函数（）{
火基
.auth（）.signInWithEmailAndPassword（this.email，this.password）。然后(
功能（用户）{
路由器。替换（'主'）
},
功能（err）{
警报（'Maaf'，+错误消息）
}
)
}
}
}
问题可能在于您使用的
此
（可能您使用的是箭头功能）。请更新问题以显示更多上下文，以帮助解决问题。谢谢：）我在组件中的脚本标记中使用了它，比如编码纯js。但是当我使用这种方法时，我得到了我应该得到的反应。我能知道吗？/路由器文件详细信息你可以查看我的要点，
<script>
import router from '../router'
export default {
  methods: {
  signIn: function () {
    firebase
    .auth().signInWithEmailAndPassword(this.email, this.password).then(
      function (user) {
        router.replace('home')
      },
      function (err) {
        alert('Maaf, ' + err.message)
      }
    )
  }
 }
}
</script>