Vue.js路由配置报错：Cannot read properties of undefined (reading 'use')

错误原因 #

报错Cannot read properties of undefined (reading 'use')出现在Vue.use(VueRouter)行，核心原因是Vue版本与路由代码写法不匹配：

• 你的路由代码是Vue2的写法，但如果当前项目安装了Vue3，import Vue from "vue"会返回undefined（Vue3不再导出全局Vue构造函数），导致无法调用Vue.use()。
• 若安装了VueRouter4（对应Vue3），也不支持Vue2的Vue.use(VueRouter)注册方式。

修复方案 #

根据你选择的Vue版本，二选一执行：

方案1：保留Vue2 + 使用VueRouter3 #

1. 安装对应版本的VueRouter：

npm install vue-router@3 --save

2. 确认你的main.js代码如下（Vue2初始化方式）：

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

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

你的现有路由代码无需修改，保持原样即可。

方案2：升级到Vue3 + VueRouter4 #

1. 确保安装的是Vue3和VueRouter4：

npm install vue@3 vue-router@4 --save

2. 修改路由文件router.js为Vue3兼容写法：

import { createRouter, createWebHashHistory } from 'vue-router'
import Scoreboard from "./components/ScoreboardTable.vue";
import Submissions from "./components/SubmissionDetails.vue";

const routes = [
  { path: "/scoreboard", component: Scoreboard },
  { path: "/submissions/:problemId", component: Submissions },
];

const router = createRouter({
  history: createWebHashHistory(), // 也可根据需求改用createWebHistory()
  routes,
});

export default router;

3. 修改main.js的Vue初始化代码：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

createApp(App)
  .use(router)
  .mount('#app')

内容的提问来源于stack exchange，提问作者CyberBreach