vue.js - vuecli2 this.router 报错???

问题描述：

aaa(){
         
        console.log(this.$router)
        //跳转页面
        this.$router.push('/zhifu')
      },

mian.js

import Vue from 'vue'
import App from './App'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import BaiduMap from 'vue-baidu-map'
import WotDesign from 'wot-design'
import 'wot-design/lib/theme-default/index.css'
import router from '../router/index.js'


Vue.config.productionTip = false



Vue.use(WotDesign)
Vue.use(ElementUI);
Vue.use(BaiduMap, {
  ak: 'xxxxxxxxxxxxx'
});

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>',
  render: h => h(App)
})

路由
index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import zhifu from '../src/components/zhifu'

Vue.use(VueRouter)

export default new VueRouter({
  routes:[
    {
      path: '/zhifu',
      name:'zhifu',
      component: zhifu,
    },
  ]
})

报错如下

undefined
vue.esm.js:5105 [Vue warn]: Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'push')"

found in

---> <ElButton> at packages/button/src/button.vue
       <BmMap>
         <App> at src/App.vue
           <Root>
warn$2 @ vue.esm.js:5105
logError @ vue.esm.js:3763
globalHandleError @ vue.esm.js:3759
handleError @ vue.esm.js:3726
invokeWithErrorHandling @ vue.esm.js:3742
invoker @ vue.esm.js:1552
invokeWithErrorHandling @ vue.esm.js:3735
Vue.$emit @ vue.esm.js:2821
handleClick @ element-ui.common.js:9465
invokeWithErrorHandling @ vue.esm.js:3735
invoker @ vue.esm.js:1552
original_1._wrapper @ vue.esm.js:8013
vue.esm.js:3767 TypeError: Cannot read properties of undefined (reading 'push')
    at VueComponent.aaa (App.vue:244:1)
    at invokeWithErrorHandling (vue.esm.js:3735:1)
    at VueComponent.invoker (vue.esm.js:1552:1)
    at invokeWithErrorHandling (vue.esm.js:3735:1)
    at Vue.$emit (vue.esm.js:2821:1)
    at VueComponent.handleClick (element-ui.common.js:9465:1)
    at invokeWithErrorHandling (vue.esm.js:3735:1)
    at HTMLButtonElement.invoker (vue.esm.js:1552:1)
    at original_1._wrapper (vue.esm.js:8013:1)
l

第 1 个答案：

aaa()是按钮触发的， 是@click="aaa()" 这样写了吧？
渲染中就直接触发了。 要么就是你调用的时候把this指向更改了，this.$router是undefined

第 2 个答案：

怎么看都像是没有做好 vue-router 的初始化啊。
只看到了你引入和安装了 vue-router（import VueRouter from 'vue-router' 和 Vue.use(VueRouter)），并没有看到你实例化 vue-router 也没有看到你挂载到Vue实例上面。
如果有做的话，最好把业务代码贴完整一些，因为只是基础设置工作并不会牵扯到敏感信息。路由表可以脱敏为空数组([])。

正常情况下需要在引入 vue-router 之后实例化 vue-router。所以稍加修改的话 main.js 会是这样。

import Vue from 'vue'
import App from './App'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import BaiduMap from 'vue-baidu-map'
import WotDesign from 'wot-design'
import 'wot-design/lib/theme-default/index.css'
import VueRouter from 'vue-router';

Vue.use(WotDesign)
Vue.use(VueRouter)
...

const router = new VueRouter({
  mode: 'history',
  routes: [] // 路由表
})
...

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

回答更新：

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import BaiduMap from 'vue-baidu-map'
import WotDesign from 'wot-design'
import 'wot-design/lib/theme-default/index.css'
- import VueRouter from 'vue-router';
+ import router from '/router/index.js'


Vue.use(WotDesign)
- Vue.use(VueRouter)


Vue.config.productionTip = false

- const router = new VueRouter({
-   mode: 'history',
-   routes: [] // 路由表
- })


Vue.use(ElementUI);

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>',
  render: h => h(App)
})

以及修改一下 /router/index.js 文件

+ import Vue from 'vue'
import VueRouter from 'vue-router'
import zhifu from '../src/components/zhifu'

+ Vue.use(VueRouter)

export default new VueRouter({
  routes:[
    {
      path: '/zhifu',
      name:'zhifu',
      component: zhifu,
    },
  ]
})

第 3 个答案：

在router文件夹下的index.js下加这个试下

VueRouter.prototype.push=function(location,resolve,reject){
    if(resolve&&reject){
        originPush.call(this,location,resolve,reject);
    }else{
        originPush.call(this,location,()=>{},()=>{});
    }
}

https://blog.csdn.net/m0_46615524/article/details/125898988

<input type="text" class="input-name" v-model ...