记录一个vue3使用router遇到的奇怪问题

最新推荐文章于 2024-05-25 22:52:07 发布
最新推荐文章于 2024-05-25 22:52:07 发布
阅读量1.7k 收藏 4
点赞数 4
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43715736/article/details/127464903
版权

使用路由标签一直报错：

[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. 
  at <App>

搞了好久找到原因，在main.js中如下

app.use中先引入了Ant，再引入了router。此时就会报上面的错误。

将顺序换一下

 

 就解决了上面的问题。😓

BrainHo
关注
  • 4
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 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的时候遇到的一个提示警告错误，虽然不复杂，但是这是一个比较常见且共性的问题，分享出来记录一下，方便以后查阅使用。
Vue warn:Vue warn]: Failed to resolve component: router-link路由跳转报错 Vue3+ts
m0_63835647的博客
06-08 835
配置完vue-router之后，控制台出现[Vue warn]: Failed to resolve component:xxxx已经解决！
vue-router不生效的问题
m0_46131187的博客
10-30 788
问题：当修改 APP.vue文件中的额部分内容的时候，能够编译出。但是浏览器刷新页面不能够正常显示页面。原因：元素挂载放在了前面。
ElmentUI使用报错：Failed to resolve component: el-button If this is a native custom element, m...
最新发布
Violetto_Yan的博客
05-25 279
项目使用的是vue3.x版本，需要使用elementplus。2、在main.js配置。
vue 报警告：Failed to resolve component:ConsTtem IFthis is a native custom element,make sure to exclude
热门推荐
从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！
06-17 8万+
Failed to resolve component:ConsTtem IFthis is a native custom element,make sure to exclude it from component resolution via cpmpilerOptions.isCustomElement at xxx .翻译一下就是：未能解析组件：constem如果此元素是本机自定义元素，请确保将其从组件中排除通过cpmpilerOptions.isCustomElement 在 xxx 组件（下面
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..
Vue3报错：Failed to resolve component: xx If this is a native custom element, make sure to exclude it f
海风依旧
12-05 5万+
Vue3报错：Failed to resolve component: xxx If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
vue3中router和store详细使用教程方法vuex和route.zip
04-24
在主文件`main.js`中，你需要导入Vue3和Vue Router，并创建一个路由器实例： ```javascript import { createApp } from 'vue' import VueRouter from 'vue-router' import App from './App.vue' // 注册Vue Router...
vue3+webpack+vue-router封装路由
05-21
vue3+webpack+vue-router封装路由，资源内容包含了vue3+webpack+vue-router，并且代码对vue-router路由进行了封装，资源下载下来之后项目代码需要先：npm install，之后就可以运行启动项目了，代码结构清晰，没有...
vue-router之解决addRoutes使用遇到的坑
10-15
总的来说，Vue Router的`addRoutes`是一个强大的功能，但在使用过程中需要注意路由的生命周期和状态管理，以避免出现类似的问题。正确处理动态路由的添加和移除，不仅能够消除警告，还能提高应用的稳定性和用户体验...
vue3+webpack+vue-router路由
05-21
vue3+webpack+vue-router路由，文件的代码包含了vue3+webpack+vue-router路由，代码清晰，下载下来只需要npm install下载一下依赖项之后就可以直接运行代码了。
vue-router-next：Vue 3官方路由器
02-06
vue-router-next 这是Vue路由器4的存储库（适用于Vue 3）支持Vue路由器Vue Router是Vue生态系统的一部分，是MIT许可的开放源代码项目，其持续的开发完全依靠赞助者的支持而得以实现。 如果您想成为赞助商，请考虑：...
Vue路由问题，Failed to resolve component: router-link
lichengbo_的博客
03-11 2489
runtime-core.esm-bundler.js?d2dd:40 [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. at
vue3报错 Failed to resolve component router-view
曈欣的博客
09-07 3146
vue3报错 Failed to resolve component router-view 解决
关于Vue3.x + typescript 路由＜router-link＞＜/router-link＞无法解析
weixin_44867819的博客
03-16 3594
** 关于vue3.x + typescript 配置路由 无法解析 ** 文章目录关于vue3.x + typescript 配置路由 无法解析项目场景：vue3.x + typescript 配置路由问题描述：原因分析：解决方案：前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPant
关于vue3开发的报错问题
weixin_47438185的博客
02-17 807
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
vue3 下载router之后，路由未生效及控制台警告问题
weixin_45108907的博客
04-02 1171
在控制台页面会报出警告" Failed to resolve component: router-link"无法识别router-link import { createApp } from 'vue' import App from './App.vue' import router from "./router/index"; //引入router import './index.css' // 挂载 路由 const app = createApp(App) app.use(router) app.
[Vue warn] Failed to resolve component：报错问题。
m0_67393827的博客
03-06 1万+
在一个vue3项目中，引入一个自定义组件时出现了[Vue warn]: Failed to resolve component：【组件名】这样的警告，引入的组件没有出现在页面中。网上查了半天没找到原因，后来将vue3中的defineComponent去掉后，就不再报错了。 <script> import { defineComponent } from "vue"; import layaside from "./Aside"; export default defineComponent({
vue项目控制台显示vue-router无法连接，进行自动跳转问题解决
weixin_43821946的博客
02-18 766
解决Vue无法解析组件"router-view"问题
vue3使用router
07-27
Vue 3 使用 Vue Router 进行路由管理。下面是使用 Vue 3 和 Vue Router 的基本步骤： 步骤 1: 安装 Vue Router 在项目目录下，运行以下命令来安装 Vue Router： ``` npm install vue-router@next ``` 步骤 2: 创建路由实例 在你的项目中创建一个 `router.js` 文件，并添加以下内容： ```javascript import { createRouter, createWebHistory } from 'vue-router'; import Home from './views/Home.vue'; const routes = [ { path: '/', name: 'Home', component: Home }, // 添加其他路由配置 ]; const router = createRouter({ history: createWebHistory(), routes }); export default router; ``` 在这个例子中，我们创建了一个简单的路由配置，将根路径 `/` 映射到 `Home` 组件。 步骤 3: 在主组件中引入路由 在你的主组件（通常是 `App.vue`）中引入路由，并在模板中使用 `<router-view>` 来渲染组件： ```vue <template> <div id="app"> <router-view></router-view> </div> </template> <script> import { createApp } from 'vue'; import router from './router'; export default { name: 'App', router, // 其他组件选项 } </script> ``` 这样，`<router-view>` 将会根据当前路由的路径动态渲染相应的组件。 步骤 4: 在组件中定义路由链接 在需要导航到其他页面的组件中，你可以使用 `<router-link>` 来定义路由链接： ```vue <template> <div> <router-link to="/">Home</router-link> <router-link to="/about">About</router-link> <!-- 其他链接 --> </div> </template> ``` 这样，当用户点击链接时，路由会自动切换到相应的路径，并渲染对应的组件。 这就是使用 Vue 3 和 Vue Router 进行路由管理的基本步骤。你可以根据需要添加更多的路由配置和组件。希望对你有所帮助！

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值