javascript - 如何使用vue3在指定页面加载cdn的js?

Question

如何才能实现这个功能？最好配合路由勾子实现，不然应该会在一个页面加载后，其他页面不点击刷新应该会一直保留加载的js

Answer 1

首先，要在 Vue 3 中加载 CDN 的 JS，你需要在项目的 HTML 文件中引入这些 JS 文件。在 Vue 3 中，你需要在 main.js 或 main.ts 文件中引入你的 JS 文件。

例如，如果你有一个叫做 my-script.js 的 JS 文件，你可以在 main.js 或 main.ts 文件中这样引入：

import './my-script.js'

如果你想在特定页面加载这个 JS，你可以在那个页面的 Vue 组件中引入这个 JS。例如，如果你有一个叫做 MyPage.vue 的页面组件，你可以在这个组件中这样引入：

<script src="./my-script.js"></script>

如果你想在路由切换时加载这个 JS，你可以使用 Vue Router 的导航守卫。你可以在全局导航守卫（beforeEach）或特定路由的守卫（beforeEnter）中引入这个 JS。例如：

const router = createRouter({  history: createWebHistory(),  routes: [    {      path: '/my-page',      component: MyPage,      beforeEnter: (to, from, next) => {        import('./my-script.js')          .then(() => next())          .catch(() => next())      }    }  ]})

请注意，上述示例中的 import('./my-script.js') 会导致页面在加载时阻塞，直到 JS 文件加载完成。如果你想避免这种情况，你可能需要使用动态导入（import()）和异步组件。