关于Vue3.x + typescript 路由＜router-link＞＜/router-link＞无法解析

最新推荐文章于 2023-10-30 09:09:08 发布
最新推荐文章于 2023-10-30 09:09:08 发布
阅读量3.5k 收藏 8
点赞数 11
文章标签： vue typescript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44867819/article/details/114886027
版权

**

关于vue3.x + typescript 配置路由 无法解析

**

项目场景：vue3.x + typescript 配置路由

问题描述：

在控制台页面会报出警告" Failed to resolve component: router-link"无法识别router-link

如图所示

这里并没有转化成a标签
这里并没有转化成a标签而且直接显示出来了

然后我看来一眼控制台，提示"Failed to resolve component: router-link"无法识别router-link

如图所示
在这里插入图片描述

然后我以为是版本问题我就去package.json文件去看了一眼
在这里插入图片描述
版本也没问题

然后回到main.ts文件去看发现了问题的根源
在这里插入图片描述
以为之前已经把createApp(App) 赋值给 app了，最后又重新声明一次，把前面app.use(router)挂载的给覆盖了.

正确写法如下
在这里插入图片描述

总结

真的是细节决定成败，一个低级错误花费了一个一个上午多一点的时间。中途也出现各种模块找不到的错误，去博客翻看解决代码，不得不说，那些大神都好厉害，我也要慢慢努力！！！
第一次写博客。emmm写的不是很好，还请多多指点

一个正在努力的兔子！(ps:前端小菜鸟在线学习中！)

兔兔在线学习中
关注
  • 11
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
vue3 下载router之后，路由未生效及控制台警告问题
weixin_45108907的博客
04-02 1170
在控制台页面会报出警告" 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.
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 + ...
vue3.x+vite+ts+vue-router@4.x 路由使用demo
07-24
vue3.x+vite+ts+vue-router@4.x 路由使用demo，可供学习使用，也可在此基础上写项目
Vue warn:Vue warn]: Failed to resolve component: router-link路由跳转报错 Vue3+ts
m0_63835647的博客
06-08 831
配置完vue-router之后，控制台出现[Vue warn]: Failed to resolve component:xxxx已经解决！
Vue路由问题，Failed to resolve component: router-link
lichengbo_的博客
03-11 2465
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
Bug 关于vue3无法解析router-view Failed to resolve component: router-view
technologist_20的博客
04-13 9094
const app = createApp(App); app.use(router); //app.use(router)这个必须在mount('#app')前面，不然会导致可能无法渲染 app.mount('#app');
router-link不识别
weixin_42600128的博客
02-16 775
router-link是Vue.js中的一个组件，它用于实现页面跳转和路由功能。如果你的代码中出现了“router-link不识别”的错误，可能是以下原因之一： 你没有正确引入Vue.js的router模块。在使用router-link之前，需要在代码中引入Vue.js的router模块，否则Vue.js无法识别router-link组件。 你的代码中存在拼写错误。请检查代码中是否有拼写错误，...
Vue3+TypeScript+Vite+Vuex4+vue-router实现电商购物网站.zip
03-03
Vue3+TypeScript+Vite+Vuex4+vue-router实现电商购物网站.zip
vue3+typescript+vuex+vue-router的实战demo实现一个购物车.zip
最新发布
03-03
vue3+typescript+vuex+vue-router的实战demo实现一个购物车.zip vue3+typescript+vuex+vue-router的实战demo实现一个购物车.zip vue3+typescript+vuex+vue-router的实战demo实现一个购物车.zip vue3+typescript+vuex...
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0后台管理系统
05-02
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+...
vue3引入vue-router无法使用router-link、router-view组件
m0_67108146的博客
06-09 1645
vue3引入vue-router无法使用router-link、router-view组件
Failed to resolve component: router-view at ＜App＞
Jimyking的博客
08-05 783
在新建Vue3项目时，在App.vue文件中使用router-view会出现如下警告，并且页面不显示：
【vue动态路由参数的坑】动态路由传参时路由变化页面没有变化解决方案
马云
09-15 824
动态路由参数的坑 在跳路由：/user/1 到 /user/2中，id由1变为2，视图中的id还是1，没有变为2 解决方案 使用watch解决 watch: { $route(to,from) { this.id = to.params.id } } 使用beforeRouteUpdate解决 beforeRouteUpdate(to, from) { this.id = to.params.id } ...
Failed to resolve component: router-view
m0_53461006的博客
11-17 401
情况： 基于 vue3 + vite + vue-Router4.0 创建使用路由 <router-view /> 报错 解决： 在 mainjs 中调用router。。。
vue-router不生效的问题
m0_46131187的博客
10-30 766
问题：当修改 APP.vue文件中的额部分内容的时候，能够编译出。但是浏览器刷新页面不能够正常显示页面。原因：元素挂载放在了前面。
关于Vue3警告：Failed to resolve component:XXX的解决办法
P9ulp的博客
03-30 1万+
今天做小项目的时候遇到的问题，上网参考了几个大佬给出的解决方法。
记录一个vue3使用router遇到的奇怪问题
qq_43715736的博客
10-22 1792
vue3中使用router。报错：Failed to resolve component: router-link
vue3报错 Failed to resolve component router-view
曈欣的博客
09-07 3092
vue3报错 Failed to resolve component router-view 解决
Vue3路由配置createRouter、createWebHistory、useRouter,useRoute
热门推荐
看见小狮子没
09-22 1万+
Vue3和Vue2基本差不多，只不过需要将、从中引入，再进行使用。
vue3.x + typescript搜索框
07-12
对于Vue 3.x和TypeScript的搜索框，你可以按照以下步骤来实现： 1. 首先，安装Vue 3.x和TypeScript的依赖： ``` npm install vue@next npm install vue-router@next npm install typescript ``` 2. 在你的Vue项目中创建一个搜索组件(Search.vue)，并在该组件中添加一个输入框和搜索按钮： ```html <template> <div> <input type="text" v-model="searchTerm" placeholder="请输入搜索内容" /> <button @click="search">搜索</button> </div> </template> <script lang="ts"> import { defineComponent } from 'vue'; export default defineComponent({ data() { return { searchTerm: '', }; }, methods: { search() { // 在这里执行搜索逻辑 console.log('搜索内容:', this.searchTerm); }, }, }); </script> ``` 3. 在需要使用搜索组件的页面中，引入并使用该组件： ```html <template> <div> <Search /> </div> </template> <script lang="ts"> import { defineComponent } from 'vue'; import Search from './Search.vue'; export default defineComponent({ components: { Search, }, }); </script> ``` 你可以根据自己的需求在搜索按钮的点击事件(search方法)中添加具体的搜索逻辑。同时，你可以通过v-model指令绑定输入框的值到searchTerm变量中，以便在搜索方法中使用。 希望这个简单的例子能帮助到你！如果有任何问题，请随时提问。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值