【无标题】Error：Failed to resolve component: router-view

最新推荐文章于 2025-05-09 20:16:33 发布

guinue

最新推荐文章于 2025-05-09 20:16:33 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript vue.js 前端

本文链接：https://blog.youkuaiyun.com/guinue/article/details/129998715

在Vue项目中遇到一个错误提示，表示无法解析组件router-view。问题可能出在路由配置或导入上。在src/router/index.js中正确配置了路由，包括Main和Home组件。同时，在App.vue中使用<router-view/>作为占位以实现页面跳转。在入口文件中引入并应用了路由。Main.vue和Home.vue分别定义了组件内容。解决方法可能涉及检查编译选项，确保对自定义元素的处理设置正确。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

报错提示
Failed to resolve component: router-view
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement

1. 项目源代码
1.1配置路由：src / router / index.js

//引入路由
import { createRouter, createWebHashHistory } from "vue-router";
//定义路由
const routes = [
  {
    path: '/',
    component:()=>import('../view/Main'),
    children: [
      {
        path:'/',
        name: 'home',
        component: () => import('../view/home/Home')
      }
    ] 
  }
] 


const router = createRouter({
  history: createWebHashHistory(),
  routes 
})

//导出路由
export default router

1.2入口文件引入路由

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

import router from './router/index'
const app = createApp(App)
app.use(router)

// createApp(App).mount('#app')  原错误
//上方已经定义 createApp，下面直接用即可
app.mount('#app')

1.3路由占位即跳转
App.vue

<template>
  <router-view></router-view>
</template>

<script setup>

</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

src / view / Main.vue

<template>
  <div>
    左侧菜单
  </div>
  <div>
    头部
  </div>
  <div>
    随时发生变化
    <router-view></router-view>
  </div>
</template>

src / home / Home.vue

<template>
  <div>
    我是首页组件
  </div>
</template>