vue-router this.$router.push 提示错误 push undefined

Question

控制台错误：
Uncaught TypeError: Cannot read property 'push' of undefined

---

index.js:

import Vue from "vue";
import queryBar from './components/queryBar';
import cityBar from './components/cityBar';
import lineQueryMulti from './components/lineQueryMulti';
import VueRouter from 'vue-router'

Vue.config.debug = true;//开启错误提示

Vue.use(VueRouter)

var app = new Vue({
    el: '#main', 
    components: {
        'query-bar':queryBar,
        'city-bar':cityBar,
        lineQueryMulti,
    },
    router: new VueRouter({
        mode:'hash',
        routes:[
            {path: '/queryLine/', component: lineQueryMulti},
            //{path: '/bar', component: {template:'<div>bar</div>'} }
        ]
    }),
});

---

queryBar.vue:

<script>
    import Vue from "vue";
    import cityBar from './cityBar';
    import axios from 'axios';

    //Vue.component('city-bar', cityBar);

    var self = this;

    export default {

        //data:function(){}，下面是es6写法
        data () {
            return {
                busNo: '',
                stationName: '',

            }
        },

        components : {
            cityBar
        },

        methods: {

            onSubmitLine: () => {
                this.$router.push({ path: 'queryLine', query: { cityNameCn: cityNameCn.name, busNo: busNo }})
            },
        },

    }
</script>
<template>
    <div id="mainQuery">
    <!-- 声明cityBar.vue为queryBar.vue的子组件 -->
    <city-bar :message=cityNameCn.name></city-bar>
    
    <form action="queryLine.do" method="post" class="xianluForm queryForm clearAndHideOverflow" v-on:submit.prevent="onSubmitLine">
         <input type="text" name="busNo" class="xianluInput" placeholder="请输入线路" v-model="busNo"/>
         <button type="submit" class="submitButton">查询</button>
    </form>

    </div>
</template>

Answer 1

我怀疑是你箭头方法的原因导致的：

() =>

Answer 2

不要箭头函数
methods里的方法this本来就是vue对象

Answer 3

你在queryBar组件里面调用route，但是route里面没有注册queryBar组件，自然找不到。
另外，箭头函数写的时候不要带冒号了：

onSubmitStation: () => {

把冒号去掉吧

Answer 4

打印一下this,不是指向的vue实例，不用箭头函数，直接function就可以了

Answer 5

queryLine: function() {
    this.$router.push({ name: 'user', params: { userId: 123 }})
}

改成箭头函数就行