VUE3 添加router-link后 报错，求助一下各位

最新推荐文章于 2024-05-14 17:36:28 发布
最新推荐文章于 2024-05-14 17:36:28 发布
阅读量3.2k 收藏
点赞数 2
分类专栏： VUE 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/TROIS3san/article/details/124230503
版权

学习vue3，使用<router-link to="/">首页</router-link>后就报错，希望大佬们帮忙解答一下，在网上已经找了一圈，没发现解决方案。谢谢

vue-router.esm-bundler.js:2147 Uncaught TypeError: Cannot destructure property 'options' of 'inject(...)' as it is undefined.
    at setup (vue-router.esm-bundler.js:2147:17)
    at callWithErrorHandling (runtime-core.esm-bundler.js:155:22)
    at setupStatefulComponent (runtime-core.esm-bundler.js:7109:29)
    at setupComponent (runtime-core.esm-bundler.js:7064:11)
    at mountComponent (runtime-core.esm-bundler.js:4951:13)
    at processComponent (runtime-core.esm-bundler.js:4926:17)
    at patch (runtime-core.esm-bundler.js:4518:21)
    at mountChildren (runtime-core.esm-bundler.js:4714:13)
    at processFragment (runtime-core.esm-bundler.js:4885:13)
    at patch (runtime-core.esm-bundler.js:4511:17)

目录结构：

 

 路由：

App.vue

 

 main.js

 

TROIS3san
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 14
    评论
专栏目录
详谈vue中router-link和传统a链接的区别
10-15
此外，`<router-link>` 的`to`属性可以简化路径书写，特别是当设置`base`选项后，你无需再在`to`属性中包含基路径。而`<a>` 标签的`href`属性则需要完整的URL。 `<router-link>` 还允许自定义渲染标签，通过`tag`...
详解vue-router 2.0 常用基础知识点之router-link
12-09
在Vue 2.0中，`router-link`组件是用于创建导航链接的关键元素，它与`router-view`配合使用，实现了单页面应用(SPA)的页面切换。 首先，我们来看`$route.params`。这是一个对象，存储了动态路径参数和全匹配片段。...
Naive UI 表单问题
qq_24523773的博客
06-12 573
这个报错读起来发现真的很难理解呀，最后发现用naive ui表单时，忘了加外一层，加上如下就好了。页面切换时发现报这个错。
vue之首页的分类与上拉加载更多
weixin_47409897的博客
10-18 339
目录首页的分类Home.vueArticalDetail.vue 首页的分类 功能： 1：一开始先获取到 tab 菜单的数据 001 然后定义一个方法，对里面的 tab 中的 item每一项数据操作，添加list(数据)，还有page等 002 然后获取每一项 根据当前item的id 发起请求 获取到item的数据 用于渲染数据 003 002之中需要 拿到 当前 tab中的item选中的 拿到当前item，也就是需要点击的时候，监听active的变化去实现的！ 2：上拉加载更多 001：先
2024年最全在 Vue3中，封装一个 router-links ,支持内外链接都能跳转！，2024年最新2024年前端面试心得
最新发布
2401_84419009的博客
05-14 676
如果你打算靠自己摸索自学，那么你首先要了解学习前端的基本大纲，这是你将要学习的主要内容，理解以及掌握好这些内容，便可以找到一份初级的前端开发工作。你还需要有一套完整的前端学习教程，作为初学者最好的方式就是看视频教程学习，初学者容易理解接受。不要选择买书学习，这样的方式没有几个人能学会，基本都是看不下去书，也看不懂书。如果喜欢看书的学弟，可以买一些经典的书籍作为辅助即可，主要还是以看教程为主。每天抽出固定几个小时学习，做好长期学习的准备。
router-link跳转失败（Vue router命名路由）
whtli的博客
01-21 7750
Vue router命名路由，router-link跳转失败解决方法
【vue3】vue3 实践中遇到的问题
hzxOnlineOk的博客
03-24 1545
今天尝试用 vue 3 写个小 Demo，想写个路由（用的 vue-router: ^4.1.3），在修改 App.vue 文件这一步的时候，运行到 Google Chrome 就报错了：Uncaught TypeError: Cannot destructure property ‘options’ of ‘inject(…或者报错提示信息为：Uncaught TypeError: Cannot destructure property ‘options’ of '(0 , vue__WEBP…
Vue 出现Syntax Error:TypeError: Cannot read property ‘vue‘ of undefined的一种解决办法
qq_38526167的博客
02-24 6881
Vue 出现Syntax Error:TypeError: Cannot read property 'vue' of undefined的一种解决办法
vue-router-next：Vue 3官方路由器
02-06
vue-router-next 这是Vue路由器4的存储库（适用于Vue 3）...快速开始通过CDN： [removed][removed] 浏览器在上的将其添加到现有的Vue项目中： npm install vue-router@4对Vue Router 3的更改请查阅《 。贡献请参阅。特
vue项目中使用vue-i18n报错的解决方法
12-09
然而最近在vue项目中使用vue-i18n的时候，居然报错了，通过查找相关的资料终于找到了解决的方法，下面话不多说了，来一起看看详细的介绍吧 发现问题 iview-admin框架克隆到本地，添加路由的时候，稍不注意就会遇到...
focus-trap:陷阱焦点在DOM节点内
04-28
焦点陷阱 在DOM节点内捕获焦点。 有时可能会发现，在DOM节点内捕获焦点很重要-因此，当用户单击Tab或Shift+Tab或单击周围时，她无法逃脱特定周期的可聚焦元素。 当您尝试构建可访问的模态时，您肯定会面临这个挑战。 这个模块是解决该问题的一个模块化的原始JS解决方案。 在更高级别的组件中使用它。 例如，如果您使用React，请签出 ，该库周围的轻包装。 如果您不是React用户，请考虑在您的选择框架中创建轻包装器。 它能做什么 激活焦点陷阱后，将发生以下情况： 焦点陷阱中的某些元素会接收焦点。 默认情况下，这将是焦点陷阱的Tab顺序中的第一个元素（由确定）。 或者，您可以指定一个应该获得此初始焦点的元素。 Tab和Shift+Tab键将在焦点陷阱的可选项元素之间循环，但不会离开焦点陷阱。 焦点陷阱中的喀哒声正常； 但是在焦点陷阱之外的点击被阻止了。 Escape键
focus-trap-vue:Vue组件可将焦点捕获在DOM元素内
04-29
焦点陷阱 寻找Vue 3版本吗？ Vue组件可将焦点捕获在DOM元素内 安装 npm install focus-trap focus-trap-vue 用法 该库导出一个名为export FocusTrap单个库，并需要作为对等依赖项。 因此，您可以在本地导入该组件或在全局范围内对其进行声明： import { FocusTrap } from 'focus-trap-vue' Vue . component ( 'FocusTrap' , FocusTrap ) 可以通过三种不同的方式来控制FocusTrap ： 通过使用active布尔道具 通过使用v-model （使用active道具） 通过调用组件上的activate / deactivate方法 推荐的方法是使用v-model ，它应该包含一个孩子： < focus-trap v-model =" isActiv
Vue 页面跳转不用router-link的实现代码
08-27
Vue 页面跳转不用 router-link 的实现代码 本文主要介绍了 Vue 页面跳转不用 router-link 的实现代码，文中给大家介绍了 Vue router-link 跳转传值示例，需要的朋友可以参考下。 首先， Vue router-link 是 Vue.js...
TypeError: Cannot destructure undefined
Ryan_black的博客
11-22 1万+
在Vue开发时遇到的一个bug,太容易忘记了,记一个笔记: 挺烦的一个bug,只知道好像是解构出了问题,但是不知道是哪里的问题,仔细看了一下,我发现有两个问题: 问题一: 解构的数据一定是要有值在里面的,没有值的解构是一定不可以的. let {} = this.props; //错误示范 let { data }=this.props; //正确写法 问题二: 解构的时候想要给予一个对象...
Uncaught TypeError: Cannot destructure property ‘dialog‘ of ‘require(...).remote‘ as it is undefined
qq_41685731的博客
03-25 4870
解决 Uncaught TypeError: Cannot destructure property ‘dialog’ of ‘require(…).remote’ as it is undefined. 从v9版本开始，remote除非将设置enableRemoteModule为true，否则不允许在渲染器上使用。 const mainWindow = new BrowserWindow({ width: 800, height: 600, webPreferences: { preload:
TypeError: Cannot destructure property `createHash` of 'undefined' or 'null'
若水程序员博客
04-14 1214
展开 npm run build的时候出现以下异常： TypeError: Cannot destructure property `createHash` of 'undefined' or 'null' 经查，是webpack版本原因，直接升级版本到最新吧，即可解决！ npm add webpack@latest ...
TypeError: Cannot destructure property `compile` of 'undefined' or 'null'
weixin_43964113的博客
01-25 1252
真真奇了怪了，本地跑还是好的，推到远程之后就报错了 - - 项目描述： vue项目，vue-cli脚手架搭建的项目。默认"webpack-dev-server": “^3.1.15”， 问题解决 webpack-dev-server版本过高,重新安装 npm install -D webpack-dev-server@3.0.0 有坑 npm install之后不要 npm aduit fix修...
easyui控制台一直报Cannot read property 'options' of undefined
热门推荐
easonjake的博客
05-29 4万+
页面的一个select标签使用了class="easyui-combobox"，因为要在页面一加载选定某个值，就有了如下代码： 这个时候就报Cannot read property 'options' of undefined，意思是找不到options参数。这是因为easyui会动态改变页面dom结构，也就是说会在页面加载后，easyui会自己在页面生成combobox。 这个时候问题就...
vue3的router-view和router-link
08-19
Vue 3的router-view和router-link是Vue Router提供的两个核心组件，用于实现路由导航和视图渲染的功能。 router-link是一个用于生成链接的组件，它会自动根据路由配置生成对应的链接，并在用户点击时触发路由跳转。你可以使用to属性指定链接的目标路由，例如to='home'表示跳转到名为home的路由。 router-view是一个用于渲染视图的组件，它会根据当前路由的路径匹配路由配置中的组件进行渲染。在你的应用中，你可以将router-view放置在合适的位置，它会根据当前路由的变化自动切换渲染的组件。 通过在Vue组件中使用router-link和router-view组件，你可以实现简单而灵活的路由导航和视图切换功能，让用户可以方便地浏览不同的页面内容。 请注意，以上是Vue 3中使用router-view和router-link的基本用法。具体的配置和使用方式可能会因你的项目需求和Vue Router的版本而有所不同。如果你遇到了具体的问题和报错，请提供更多的信息以便我能够更详细地回答你的问题。<span class="em">1</span><span class="em">2</span> #### 引用[.reference_title] - *1* [【JavaScript源代码】Vue router-view和router-link的实现原理.docx](https://download.csdn.net/download/mmoo_python/72117437)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [vue3引入vue-router无法使用router-link、router-view组件](https://blog.csdn.net/m0_67108146/article/details/125198929)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值