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

Question

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

神经蛙

1

发布于
2023-10-22 重庆

新手上路，请多包涵

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

javascript 前端 vue.js html node.js

阅读 2k

AI BotBETA

首先，要在 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()）和异步组件。

1 个回答

得票最新

Meathill

22.5k133642

发布于
2023-10-22 广东