Vue 3中app.use()无法接受Router参数的问题排查

一、主入口文件重复定义Router #

你的main.js中先导入了router from "./router"，随后又重新创建了一个router实例，这会覆盖之前导入的路由配置，既引发IDE的类型校验错误，也会导致路由逻辑混乱。

修改后的main.js只需保留导入已配置好的router，删除重复创建的代码：

import './assets/main.css'

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import router from "./router";
import App from './App.vue'

const app = createApp(App)
app.use(createPinia())
app.use(router)

app.mount('#app')

二、App.vue缺少路由渲染出口 #

路由生效的核心是在根组件中添加<router-view>标签，它是路由组件的渲染容器。你的App.vue中没有这个标签，所以无论路由如何切换，只会显示App.vue本身的内容。

修改App.vue，添加<router-view>作为路由出口，同时建议把学生管理的核心内容移到Index.vue页面组件中：

<template>
  <header>
    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
    <div class="wrapper">
      <HelloWorld msg="You did it!" />
    </div>
  </header>

  <!-- 路由组件渲染出口 -->
  <router-view></router-view>
</template>

三、router.js中AboutComponent定义错误 #

你将AboutComponent定义为字符串模板：const AboutComponent = "<div style='color: red'>About</div>";，但Vue Router要求component必须是Vue组件对象，不能是纯字符串。

可以修改为以下两种方式之一：

// 方式1：异步导入组件（推荐）
const AboutComponent = () => import("./pages/About.vue");

// 方式2：直接定义组件对象
const AboutComponent = { template: "<div style='color: red'>About</div>" };

四、router.js中多余的mode配置 #

Vue Router 4.x版本已废弃mode选项，改用history参数指定历史模式（如createWebHistory()），保留mode: "history"会导致配置冲突，需删除该配置项：

const router = createRouter({
    // 删除此行：mode: "history",
    history: createWebHistory(),
    routes,
    linkActiveClass: "nested-active",
    linkExactActiveClass: "nested-active",
});

五、IDE类型错误的根源 #

PyCharm提示的类型不匹配错误，本质是main.js中重复定义router导致的类型冲突。解决上述重复定义问题后，该错误会自动消失；若仍有提示，可尝试重启IDE或更新Vue相关类型依赖包。

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