Vue3+Vite项目使用vue-router@next时无法解析router-view组件的问题咨询

你遇到的router-view无法解析、功能失效的问题，来自路由配置文件的语法和API调用错误，直接导致路由实例初始化失败。此时app.use(router)传入的是无效对象，根本无法向Vue应用注入路由相关能力（包括全局注册router-view、router-link组件），控制台就会抛出组件无法解析的警告。

• 语法使用偏差：createRouter是接收配置对象的函数，你错误使用方括号[]包裹参数，导致路由实例创建逻辑完全失效。
• API调用偏差：配置路由history模式时，createWebHistory是需要执行的工厂函数，你直接将函数本身赋值给history字段，没有执行函数生成合法的history实例。
• 导入路径校验：main.js中路由的导入路径为./router/router，需要确保路由文件实际存放在src/router/router.js，避免文件找不到导致的隐式导入失败。

1. 路由配置文件（按src/router/router.js的存放路径编写）：

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

import Home from '../components/Home.vue'

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home
  }
]

// 修正两处错误：createRouter 用圆括号传参、createWebHistory 执行后传入配置
const router = createRouter({
  history: createWebHistory(),
  routes,
})

export default router

2. main.js现有写法无需调整：

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

const app = createApp(App);
app.use(router);
app.mount('#app');

3. App.vue现有写法无需调整：路由实例正常注入后，router-view会作为全局组件自动被识别，不需要手动单独注册。

修改完成后重启Vite开发服务，控制台的组件解析警告会消失，访问根路径时会正常渲染Home.vue的内容。

如果你的路由文件存放在src/router/index.js，只需要把main.js中的导入路径调整为./router/index，保证导入路径和实际文件位置匹配即可。

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