Vue3特定页面加载CDN JS及路由钩子结合
在Vue3单页面应用中，有时需要在特定页面加载外部CDN资源，且仅在该页面生效。本文介绍如何结合Vue3和路由钩子实现这一功能，避免资源在页面切换时冗余加载。
需求分析
如何在特定页面加载外部CDN JS，并防止在其他页面重复加载或残留？
实现方案
以下几种方法可实现该功能：
-
动态
import(): 利用Vue3的动态import()函数异步加载JS文件。在组件的mounted钩子中：立即学习“前端免费学习笔记（深入）”；
mounted() { import('https://cdn.example.com/script.js') .then(module => { // 处理加载后的逻辑 }) .catch(error => { // 处理错误 }); }此方法确保JS只在组件挂载时加载。
-
路由懒加载: 结合Vue Router的懒加载，在路由配置中使用动态
import()加载组件，并在组件内加载CDN JS：const router = createRouter({ routes: [ { path: '/specific-page', component: () => import('@/views/SpecificPage.vue') } ] });在
SpecificPage.vue的mounted钩子中加载CDN JS。 -
DOM操作插入
: 直接通过DOM操作在页面插入标签加载JS：mounted() { const script = document.createElement('script'); script.src = 'https://cdn.example.com/script.js'; script.async = true; document.body.appendChild(script); }同样在特定组件的
mounted钩子中执行。
JS资源卸载
在单页面应用中，组件销毁时，其关联的JS资源也会被自动卸载，不会影响其他页面。无需担心已加载的JS会干扰其他页面。
通过以上方法，结合Vue3和路由钩子，可以高效管理CDN JS资源，优化应用性能。 选择哪种方法取决于具体项目需求和代码结构。
