今天我在创建vuecl3项目时 配置路由的过程中报了这个错,因为我是按照vueli2的方式一步一步去配置路由映射以及使用路由组件。

这个错是 提示‘use’并未定义，也就是vue中没有use（）这个方法。

出现这个问题是因为 vue3+router4的版本(主要是router4)不再使用use来引入vueRouter,下面是vue3+router3的路由导入写法,也是为什么报错的原因。

import VueRouter from 'vue-router'
import Vue from 'vue'
//通过 Vue.use(插件),安装插件
Vue.use(VueRouter)

其次还有可能是路由版本的问题,vue2大多使用的是@3的版本,vue3使用的是@4的版本

下面的是我的package.json文件

 "dependencies": {
    "core-js": "^3.8.3",
    "vue": "^3.2.13",
    "vue-router": "^4.1.3"
  },

下面给出解决方案:

router文件夹下的index.js文件中

使用createRouter和createWebHistory

import { createRouter, createWebHistory } from 'vue-router'

const routerHistory = createWebHistory()


const routes=[
 //这里和vue2一样
]
const router = createRouter({
    history: routerHistory,
 routes
})

export default router

main.js中

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'
 
const app = createApp(App)
app.use(router)
app.mount('#app')

然后就可以运行项目了 

npm run serve