vue3 - 报错Failed to resolve component: router-view If this is a native custom element, make sure to e

于 2024-06-19 17:13:13 发布
阅读量1.4k 收藏 3
点赞数 3
分类专栏： 前端常见问题解决 文章标签： vue3.js vue-router router-view vue3浏览器警告报错 无法解析router-view vue报错详细解决办法 还是报错怎么办
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50545213/article/details/139807466
版权
前端常见问题解决 专栏收录该内容
102 篇文章 103 订阅 ¥9.90 ¥99.00
订阅专栏

问题说明

在vue3项目开发中，浏览器控制台警告报错：Vue warn]: Failed to resolve component: router-view | If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.，vue3 报错 “未能解析组件：router-view 如果这是本机自定义元素，请确保通过compilerOptions.isCustomElement将其从组件解析中排除。”

其他教程都无法解决，本文提供的解决方案完美搞定此问题。

在这里插入图片描述

解决方案

这个问题，

了解本专栏 订阅专栏 解锁全文
街尾杂货店&
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
订阅专栏
前端开发：Vue3提示警告Failed to resolve component：XXX If this is a native custom element… 的解决方法
软贱开发攻城狮
12-26 3万+
在前端开发中使用Vue的开发者都知道，Vue目前已经以Vue3.0为基础版本了，也就是说Vue3.0已经成为主流版本了。还在只用Vue2.0开发没有使用Vue3.0的开发者要注意了，要抓紧时间熟悉和了解Vue3以上的相关语法和知识点了，迫在眉急。本篇博文来分享一下，关于在使用Vue3的时候遇到的一个提示警告错误，虽然不复杂，但是这是一个比较常见且共性的问题，分享出来记录一下，方便以后查阅使用。
vue3-element-admin-ts::party_popper: 基于 vite + Vue3.0 + Vue-Router 4.0 + Vuex 4.0 + element-plus+Typescript 的后台管理系统vue3-element-admin-ts
04-07
vue3-element-admin:party_popper: 基于 vite + vue3 + Vue-Router 4.0 + Vuex 4.0 + element-plus + typescript 的后台管理系统简介 是一个后台前端解决方案，它基于 和 实现。它使用了最新的前端技术栈，vite + ...
vue-router 按需加载 component: () => import() 报错的解决
10-14
主要介绍了vue-router 按需加载 component: () => import() 报错的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue3报错 Failed to resolve component router-view
曈欣的博客
09-07 3193
vue3报错 Failed to resolve component router-view 解决
vue报错If this is a native custom element
最新发布
akun的博客
04-18 3887
component忘了加s。
Vue.js报错Failed to resolve filter问题的解决方法
10-22
主要介绍了Vue.js报错Failed to resolve filter问题的解决方法,需要的朋友可以参考下
vue-count-to:vue-countTo的改造版本，支持 vue 2.0、3.0 版本
04-30
vue3-count-to 基于 vue-count-to 升级改造 预览 目的 由于原有作者好像没打算升级版本，故而自己升级维护一下。 兼容 当前版本同时兼容 vue2、vue3，亦能在ts下使用 运行环境 已经测试的运行环境，vite建议使用2.0+，webpack建议使用4.0+ 、 安装 && 引入 安装 npm install vue3-count-to --save # 或 yarn add vue3-count-to --save 全局注册 import countTo from 'vue3-count-to'; 使用 Vue 2: Vue.use(countTo); 使用 Vue 3: import { createApp } from 'vue'; const app = createApp(...); app.use(countTo); 局部引入 <template>
vue3 Failed to resolve component router-view
m0_67393039的博客
03-06 1291
Failed to resolve component: router-view If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement vue3解析component: router-view失败 解决： //app.use(router) 需放在app.mount(’#app’)前面 不然加载时router-view、
vue-router踩坑：Failed to resolve component: router-view
fationopen的博客
05-20 2419
先抛出错误： 以下是配置文件： main.ts import { createApp } from 'vue' import App from './App.vue' import "tailwindcss/tailwind.css" import router from "./router/router" createApp(App).use(router); createApp(App).mount('#app'); router.ts import Vue from "vue"; import
vue3: Failed to resolve component: router-view
weixin_42606371的博客
10-25 1万+
Failed to resolve component: router-view If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement vue3解析component: router-view失败 解决： //app.use(router) 需放在app.mount('#app')前面 不然加载时router..
【无标题】Error：Failed to resolve component: router-view
guinue的博客
04-06 976
1.1配置路由：src / router / index.js。1.2入口文件引入路由。1.3路由占位即跳转。
Failed to resolve component: router-view
m0_51547272的博客
12-26 495
出现了这个问题，导致本该出现的页面没有出现，在网上看了解决办法，原来是没有挂载好app。
vue-router 按需加载 component: () = import() 报错的解决
01-18
vue的单页面（SPA）项目,...但现在vue-router的官网看看，推荐这种方式： //vue异步组件和webpack的【代码分块点】功能结合，实现了按需加载 const App = () => import(‘../component/Login.vue’); 可是，很多情
vue页面跳转问题 Failed to resolve component: router-view
m0_46462506的博客
12-02 3226
最近学vue3可把我搞苦了，为了节省时间，自己直接0基础创建项目，发现要配置的东西一大堆，其中页面不跳转最为头疼。 当大家遇到这个问题时，说面大家离成功不远了。这个问题出在顺序问题上 不然加载时router-view未被渲染 这是错误前 这是修改后 改完以后，页面就能跳转了 不过跳转路径中间一定要加 #才能成功 ...
Vue3解决：[Vue warn]: Failed to resolve component: el-table(或el-button) 的三种解决方案
热门推荐
狮子座的男孩
06-29 3万+
等组件，却发现页面一直再 Vue warn。，且在页面上一直显示不出来自己想要的结果；想完整引入 ElementPlus ui。// 没实测过，因为我使用 vue3。库，并想使用 el-table。通过方式一、方式二和方式三后，或 el-button。的代码风格不是如此;
Failed to resolve component: router-viewIf this is a native custom element, make sure to exclude it
2301_76868945的博客
01-22 739
main.js中app.use(router)放在了app.mount("#app")后面。vue3解析component: router-view失败。导致先挂载app实例，router-view渲染不了。更换两者位置后成功渲染组件。
vue3使用路由小坑（Failed to resolve component: router-view）
枫ゞ的博客
02-08 2219
出现问题： 在Vue3项目中使用路由时，如果app.mount("#app")的使用在app.use(router)前面时 会导致页面渲染不出，如下所示： import { createApp } from "vue"; import App from "./App.vue"; import router from "../src/router"; const app = createApp(App); app.mount("#app"); app.use(router); 解决办法： 必须
vue3 Failed to resolve component: router-view
weixin_39114917的博客
10-24 1995
vue3路由配置运行报错
[Vue warn]: Failed to resolve component: router-link If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
07-13
这个警告是由Vue引起的，它表示在解析组件时无法找到`router-link`组件。通常情况下，这是因为你没有正确地导入或注册`router-link`组件。 确保你在使用`router-link`组件之前已经正确地导入它。在Vue 3中，你需要从`vue-router`中导入`router-link`组件，然后在组件中进行注册。 ```javascript // 在你的组件中导入router-link import { routerLink } from 'vue-router'; export default { components: { // 注册router-link组件 'router-link': routerLink, }, // 组件的其他选项 }; ``` 如果你使用Vue 2，那么`router-link`组件已经是全局注册的，你不需要显式地注册它。但是请确保已正确安装和配置了Vue Router。 如果以上方法都没有解决问题，你可以检查一下是否有其他配置或插件与Vue Router冲突，或者在Vue实例化之前引入Vue Router。 另外，如果你使用了自定义元素，可以通过设置`compilerOptions.isCustomElement`来排除它们，使Vue不会将其作为组件进行解析。 ```javascript import { createApp } from 'vue'; import { createRouter, createWebHistory } from 'vue-router'; import App from './App.vue'; const router = createRouter({ history: createWebHistory(), routes: [ // 路由配置 ], }); const app = createApp(App); app.use(router); app.mount('#app'); ``` 确保按照上述步骤正确导入、注册和使用`router-link`组件，这样就能解决该警告了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

街尾杂货店&

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值