大家好，我是讯享网，很高兴认识大家。



• 如果时刷新页面时候会更新，可以确认一下内有无配置，为热更新，为不热更新。
• 文件地址引用问题，如：文件大小写问题、同一个文件夹下存在大驼峰小驼峰的命名方式的2种文件！

事情是这样的，今天整理项目目录文件，准备把用vite搭建的项目中的目录结构重新归类一下，由于个人比较喜欢文件夹以大写驼峰式命名，整理文件目录时，把包括 views 文件夹下的路由文件也以这种命名方式整理，整理完后发现页面热更新失效了。

无法热更新尝试过的方法：

• 在vite.config.ts 中开启 hmr 热更新

重新run一下项目，更改页面样式后，页面还是不会热更新。

• 怀疑vite插件导致无法热更新

因为项目中使用了 Element-plus 自动导入插件，我开始怀疑是自动导入插件搞的鬼，注释自动导入插件，在main.ts 使用全局导入方式使用 Element-plus ，重启项目，更改项目某个文件后返回浏览器，依然无法热更新。

• 尝试依次卸载各种插件

• 卸载 tailwindcss ，删除 tailwindcss 配置文件和样式
• 重启项目后，修改页面，返回浏览器，还是无法热更新。
• …卸载其它三方插件

是的，直到我把整个项目文件依赖的三方插件都删的差不多，也还是无法热更新…

我开始疯狂吐槽 vite 真垃圾，同时在网上寻找各种关于 vite 无法热更新的帖子，可偏偏是那些写着 文件夹名称请严格注意大小写 这句话，我没有放在心上，因为我觉得我的文件目录挺规范的 (虽然和前面那句注意大小写没有任何关系)，然后就是打脸现场：

下面这张图是刚整理完目录后的目录以及路由文件：

讯享网

发现什么问题了吗？ 是的，因为目录名和文件名称大小写不一致，这么配置的路由表，所有页面都不会热更新了 ！！

错误写法:

正确写法：

关于网上还有一种说法，如果你不想去破坏当前项目的 文件夹和文件名结构，可以只修改路由中目录名或文件名，按照我对上面这句话的理解，vite 编译时，识别文件夹和文件不区分大小写，所以我们只需要把路由表的文件名大小写改成一致就可以热更新了，但是，尝试过后，依然无法热更新。（当然你也可以试一下）

实在不想再瞎折腾了，我选择手动更改目录，把所有关于路由文件的文件夹和 .vue文件都改成了小写，终于，又可以正常热更新了：

关于对 文件夹名称严格注意大小写 这个问题的吐槽：

上面这句话本身就是一个坑，这里说的大小写，通常大家会理解为导入文件的时候目录只要对了就行，可事实上并非如此，如果使用 windows 系统开发，为了避免你碰到 vite 无法热更新的问题，我的建议是：舍弃驼峰命名规范，然后，请严格按照小写路径来创建路由页面文件夹和文件，多单词用 - 分隔。

到此这篇关于Vite热更新失效的问题解决的文章就介绍到这了,更多相关Vite热更新失效内容请搜索插件窝以前的文章或继续浏览下面的相关文章希望大家以后多多支持插件窝！ 

 <div id="navCategory"> 

讯享网

Vue Router 是 Vue.js 的官方路由库，用于在 Vue 应用中实现单页面应用（SPA）的客户端路由。它使得 Vue 应用能够在不重新加载页面的情况下实现不同的视图和状态切换。以下是 Vue Router 的详细介绍，包括基本概念、配置、路由导航以及高级用法。

路由 (Route): 路由是 URL 与 Vue 组件之间的映射关系。每个路由配置关联一个视图组件。

路由表 (Router Table): 路由表是一个数组，定义了路由的配置。每个路由配置项包括路径、组件及其他参数。

路由实例 (Router Instance): 一个 Vue Router 实例，负责管理路由配置、导航和路由状态。

路由视图 (Router View): 一个 Vue 组件，作为路由组件的容器，渲染与当前路由匹配的组件。

• - 安装

首先，安装 Vue Router：

• 配置和使用

创建路由实例

创建一个 router/index.js 文件，定义路由配置并创建路由实例：

• 在 Vue 应用中使用路由

在 main.js 文件中导入路由实例，并将其传递给 Vue 应用：

• 使用路由视图

在应用的主组件 App.vue 中，使用 组件来显示当前路由匹配的组件：

• 编程式导航

使用 Vue Router 提供的 router 实例进行编程式导航：

还可以使用 router 实例的 push 和 replace 方法：

• 声明式导航

使用 组件实现声明式导航：

路由守卫是 Vue Router 提供的一种功能，允许开发者在路由的进入、离开和变化过程中进行控制和处理。通过使用路由守卫，可以在用户导航到不同的路由时执行特定的操作，例如验证用户权限、处理数据加载等。Vue Router 提供了全局守卫、路由独享守卫和组件内守卫三种类型的守卫。

1. 全局守卫

全局守卫是在路由实例上定义的，适用于所有的路由。它们在路由变化时被调用。

• beforeEach: 在路由导航开始之前调用，可以用于处理路由访问权限等操作。

• afterEach: 在路由导航结束之后调用，可以用于执行一些不影响导航的操作，例如记录日志。

• beforeResolve: 在路由解析完且所有组件内守卫和异步路由组件都已解析之后调用。适合进行需要在导航完成前进行的操作。

2. 路由独享守卫

路由独享守卫是配置在特定路由中的，只有在匹配到该路由时才会触发。

• beforeEnter: 在路由进入之前调用，与全局 beforeEach 类似，但仅针对特定路由。

3. 组件内守卫

组件内守卫是定义在 Vue 组件内部的，专用于该组件的路由守卫。

• beforeRouteEnter: 在路由进入之前调用，此时组件实例尚未被创建。通过 next 函数获取组件实例。

• beforeRouteUpdate: 当路由在同一个组件中变化时调用（例如在动态路由中），用于处理更新。

• beforeRouteLeave: 当离开当前路由时调用，用于处理离开前的操作，例如确认对话框。

• 动态路由匹配

使用 : 来定义动态参数：

• 嵌套路由

在路由配置中定义嵌套路径：

在 Profile 组件中使用 显示子路由组件：

• 重定向

路由重定向用于将访问某一路径的请求自动转发到另一路径。这对于简化 URL 或引导用户到正确的页面非常有用。

示例

假设你希望将根路径 (/) 重定向到 /home：

当用户访问根路径时，他们会被自动重定向到 /home。

• 别名

路由别名允许你为一个路由配置多个路径。使用别名可以提供不同的 URL 路径来访问相同的页面。

示例假设你有一个 UserProfile 组件，且希望通过两个不同的路径访问它：

在这个示例中，访问 /user/123 和 /profile/123 都会渲染 UserProfile 组件。

路由元信息是用来存储与路由相关的自定义数据或信息的一个功能。这些信息不会直接影响路由的匹配，但可以用来在组件中进行条件渲染、权限控制等操作。

如何使用路由元信息

1. 定义元信息

在定义路由时，可以通过 meta 属性来添加元信息。例如：

2. 访问元信息

在组件中，可以通过 this.$route.meta 访问这些元信息。例如：

3. 使用元信息进行路由守卫

可以在全局守卫、路由守卫中使用元信息来控制访问权限或进行其他操作。例如：

路由懒加载是一种优化策略，用于减少初始加载时间和提高应用性能。通过将路由组件按需加载，而不是一次性加载所有组件，可以加快应用的响应速度和启动时间。

• 使用动态导入

使用 import() 函数来实现动态导入组件。在 Vue Router 中，可以将路由组件设置为懒加载的形式：

路由懒加载的好处

• 减少初始加载时间：只有在用户访问特定路由时，相关的组件才会被加载。
• 提高应用性能：减轻主线程负担，提升用户体验。
• 按需加载：根据用户的导航行为加载所需的组件，优化资源使用。

结论

Vue Router 提供了丰富的功能来管理 Vue 应用中的路由。通过灵活配置路由、使用导航守卫、动态路由以及嵌套路由等功能，可以创建功能强大且用户体验良好的单页面应用。

讯享网 <div id="navCategory"> 

在 Shop.vue 组件中使用 props 的数组写法接收参数 并在 methods 中创建 add 方法 点击让商品数量加一。

然后在 Home.vue 页面正常引入传参 将 num 用 v-bind 绑定 避免传递字符串类型。

注：点击后虽然商品数量能够增加 但控制台也会报错提醒 因为这么做会出现一些莫名其妙的问题 所以 Vue 不推荐直接更改 props 中的数据。

如果需要修改接收到的参数 推荐在 data 中创建一个新数据接收 props 中的数据然后使用这个新数据即可。

注：

这样就可以解决这个问题啦 因为 props 的优先级要高于 data 所以我们能在 data 中使用 props 中的数据 另外 props 的数据也是在组件实例上绑定的 所以需要用 this 调用。

需要注意 data 中的数据名不要和 props 中的数据名一样 否则会报错。

例：

注：

如果 data 和 props 中存在一样的数据名 默认会使用 props 中的数据。

以上为个人经验，希望对您有所帮助。

 <div id="navCategory"> 

在VUE应用中，经常会使用一些非vue实现的js库，这些js库可能要求外部传入一些界面DOM节点，但该界面通常是vue组件定义，无法直接传递给js库，那么vue组件如何生成DOM节点传递给js库？比如在开发地图应用中，地图引擎通常是纯js库，当点击地图上的信息点弹出信息框时，地图引擎库要求传入信息框的dom节点，通常该信息框由vue组件实现，无法直接传递给地图引擎库，需将vue组件手动生成dom节点，才能传递给地图引擎。

vue组件手动生成dom节点主要通过以下两个函数：

（1）createVNode函数:由组件对象生成一个虚拟节点。

（2）render函数：把一个虚拟节点挂载到一个dom节点上。

因此要把vue组件挂载在dom节点可以如下调用:

于是parentNode就包含了组件生成的节点，这个parentNode就可以挂载到地图的popup组件上。

注意：挂载时，需要将当前app的appContext传递给组件，否则组件不能使用当前app的资源，包括路由、界面框架、状态等全局组件，无法与当前app交互。

（1）手动卸载组件

手动挂载到dom节点的vue组件不会自动卸载，可能会造成内存泄漏（是否泄漏具体没研究过，但如果没有卸载，组件的onUnmounted不会被调用，导致有些内部的依赖该回调的功能出现问题）。卸载组件没有单独的方法，复用render方法：

render(null,parentNode);

（2）自动卸载组件

在某些情况下，我们想随着dom node的生命周期结束，一起自动卸载组件，如：地图的popup组件的生命周期是由地图管理的，地图删除popup节点时，删除对应的vue组件，可采用如下方式，增加对组件节点被删除事件的监听，在删除时，卸载vue组件：

parentNode.addEventListener("DOMNodeRemovedFromDocument",()=>render(null,parentNode));

将vue组件挂载到dom节点还有另一种方法，就是利用createApp直接创建一个app,然后mount到一个dom节点上。类似如下代码：

这种方法的vue组件运行在独立的app下，无法使用主app所注册的路由、状态、界面框架等全局资源，如果要使用，需要重新建立主app所创建的环境。所以这种方式并不适合我们的使用场景。

在Vue应用中，如果需要将某个vue组件提供给其他不支持vue的js框架，可采用此方法将vue组件生成的dom节点传递给框架，同时保持该vue组件可与当前应用交互。

到此这篇关于手动挂载Vue3.0组件到DOM节点的方法的文章就介绍到这了,更多相关Vue手动挂载到DOM节点内容请搜索插件窝以前的文章或继续浏览下面的相关文章希望大家以后多多支持插件窝！