使用vue-router跳转时JavaScript包未加载的问题咨询

核心问题在于SPA路由的无刷新切换特性和第三方库的初始化逻辑不兼容：

• 用<a>标签跳转时，浏览器会整页刷新，所有第三方库（Font Awesome、ApexCharts）的JS/CSS会重新加载，它们的初始化逻辑（比如扫描DOM替换图标、渲染图表）会从头执行一遍，所以能正常显示。
• 但<router-link>是SPA局部更新，只会替换<router-view>里的DOM，不会触发全局的页面加载事件（比如DOMContentLoaded），而很多第三方库默认只在页面首次加载时跑一次初始化，新路由里的元素自然没被处理。

针对Font Awesome（图标不显示） #

你看到<i class="ti-trash"></i>在DevTools里存在但不渲染，大概率是这两个原因：

• 图标库的DOM扫描逻辑只在首次页面加载时执行，路由切换后新增的图标元素没被扫描到；
• 要么是你没全局引入图标库的样式文件，或者没正确注册对应图标（比如ti-trash是Tabler Icons的类，不是Font Awesome的，要确认库的使用方式）。

解决办法：

• 在路由组件的mounted钩子中，手动调用图标库的初始化方法（比如Font Awesome的dom.i2svg()，Tabler Icons的tablerIcons()），让它重新扫描当前DOM；
• 确保图标库的核心样式在main.js里全局导入，比如import '@fortawesome/fontawesome-free/css/all.css'，不要只在单个组件里导入。

针对ApexCharts（图表不加载） #

这类图表库需要手动在组件挂载时创建实例并渲染，如果你只在入口文件导入了库，但没在路由组件的生命周期里执行初始化，就会出现容器存在但图表不显示的情况。

解决办法：

• 在路由组件的mounted钩子中，获取图表容器DOM，创建ApexCharts实例并调用render()；
• 如果组件用了keep-alive缓存，要在activated钩子中重新触发渲染逻辑。

额外排查点 #

• 检查main.js里的第三方库导入是否完整：比如Font Awesome要确保导入了核心库、对应图标集，并且注册了Vue组件；
• 确认是否开启了路由懒加载？如果懒加载的组件里导入第三方库，要确保导入逻辑正确，不会导致加载失败。

内容的提问来源于stack exchange，提问作者basilh