Vue3特定页面加载CDN JS及路由钩子结合

在Vue3单页面应用中，有时需要在特定页面加载外部CDN资源，且仅在该页面生效。本文介绍如何结合Vue3和路由钩子实现这一功能，避免资源在页面切换时冗余加载。

需求分析

如何在特定页面加载外部CDN JS，并防止在其他页面重复加载或残留？

实现方案

以下几种方法可实现该功能：

1. 动态 import(): 利用Vue3的动态 import() 函数异步加载JS文件。在组件的 mounted 钩子中：

   立即学习“前端免费学习笔记（深入）”；

   mounted() {
     import('https://cdn.example.com/script.js')
       .then(module => {
         // 处理加载后的逻辑
       })
       .catch(error => {
         // 处理错误
       });
   }

   此方法确保JS只在组件挂载时加载。

   

   vue-admin-change-reviewer

   审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。

   下载

2. 路由懒加载: 结合Vue Router的懒加载，在路由配置中使用动态 import() 加载组件，并在组件内加载CDN JS：

   const router = createRouter({
     routes: [
       {
         path: '/specific-page',
         component: () => import('@/views/SpecificPage.vue')
       }
     ]
   });

   在 SpecificPage.vue 的 mounted 钩子中加载CDN JS。

3. DOM操作插入 <script></script>: 直接通过DOM操作在页面插入 <script></script> 标签加载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资源，优化应用性能。 选择哪种方法取决于具体项目需求和代码结构。