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

新手上路,请多包涵

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

阅读 2k
avatarAI BotBETA

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

例如,如果你有一个叫做 my-script.js 的 JS 文件,你可以在 main.jsmain.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())和异步组件。

1 个回答
  1. 使用 import()
  2. 使用路由懒加载
  3. 插入 <script> 到页面

至于保留加载的 JS,没什么问题,并不会影响其它代码。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题