VUE学习记录（持续更新中）

原创已于 2024-05-29 10:24:45 修改 · 814 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #学习 #前端 #ecmascript

于 2024-04-03 11:43:48 首次发布

本文讲述了PDF.js库的版本更新对报错的影响，介绍了Vue中this和临时变量that的区别，以及Vue2.x和3.x版本与VueRouter3.x.x/4.x.x的正确对应安装方式。

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

问题1：pdfjs-dist报错Module parse failed: Unexpected character ‘#‘
问题描述：前端项目启动时，报错Module parse failed: Unexpected character ‘#‘，在package.json中查看是2.0.X的版本
问题解决：更新pdfjsnpm i pdfjs-dist@2.4.456 解决问题

问题2：this和that的区别
问题理解：在Vue中，this和that通常被用于指代当前上下文中的Vue实例。具体分析如下：

this：在Vue实例的方法中，this通常指向该Vue实例本身。它随着执行上下文的改变而改变，特别是在异步操作或嵌套函数中，this的值可能会发生变化。
that：that是开发者创建的一个临时变量，通常在方法的开始处将this赋值给that（如 const that = this），目的是为了保存当前的this值。这样做可以确保在后续的代码中，无论this如何变化，都可以通过that访问到初始的Vue实例。

问题3：export ‘default’ (imported as ‘VueRouter’) was not found in ‘vue-router’ (possible exports: NavigationFailureType, RouterLink, RouterView, START_LOCATION, createMemoryHistory, createRouter, createRouterMatcher, createWebHashHistory, createWebHistory, isNavigationFailure, loadRouteLocation, matchedRouteKey, onBeforeRouteLeave, onBeforeRouteUpdate, parseQuery, routeLocationKey, routerKey, routerViewLocationKey, stringifyQuery, useLink, useRoute, useRouter, viewDepthKey)
问题描述：vue和vue-router版本对应。
解决方案：vue2.x应该使用vue-router3.x.x，npm install vue-router@3；vue3.x应该使用vue-router4.x.xnpm install vue-router@4；