之前创建项目使用还好好的,这次想新建个项目练练手,才用了vue-router就报错了,记录下自己修改了一个下午的bug,泪目了(其实是版本问题,小小剧透)

报错:Object(...) is not a fuction
在这里插入图片描述

创建项目时用的是vue-cli3命令:vue create projectName
选择vue2:
在这里插入图片描述
main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  router,
  store
}).$mount('#app')

router文件夹下的index.js

import  Vue  from 'vue'
import  VueRouter  from 'vue-router'

const testA = () => import('../views/testA.vue')
const testB = () => import('../views/testB.vue')
const testC = () => import('../views/testC.vue')

//1.安装插件
Vue.use(VueRouter);

//2.创建路由对象
const routes = [
  {
    path: '',
    redirect: '/testa'
  },
  {
    path: '/testa',
    component: testA
  },
  {
    path: '/testb',
    component: testB
  },
  {
    path: '/testc',
    component: testC
  }
]
const router = new VueRouter({
  routes,
  mode: 'history'
})

export default router

store文件夹下的index.js

import Vue from 'vue';
import Vuex from 'vuex'

Vue.use(Vuex);
const store = new Vuex.Store({
  state: {
  },
  mutations: {
  },
  actions: {
  }
})
export default store;

找bug:
一开始报错,百度了下,既然报错Object(…) is not a fuction,那肯定是那个函数或者啥写错拼错了,检查了一遍,就是没有错。又有的文章说是import引入没有加{},我给全部加上了,报错Cannot read properties of undefined (reading ‘use‘)。百思不得其解以为是创项目时使用的脚手架和语法有冲突,又重新创了几次项目。。。。这里查了创项目的文章vue-cli3中使用vue-router

真正的原因是vue-router,vuex和vue的版本不匹配。解决方法:卸载vue-router和vuex npm uninstall vue-routernpm uninstall vuex,安装匹配版本,我这里可以运行的版本是vue-router: “^3.5.2”, vuex: “^3.6.2”。输入命令npm install vue-router@3.5.2npm install vuex@3.6.2,当然不是重新安装就完事儿了,重点是再输入npm install,然后bug就完美解决啦~

附上版本:
在这里插入图片描述

Logo

前往低代码交流专区

更多推荐