发新帖

[web前端] [Vue2] [vue3] vue页面跳转成功后加载外部js

零下一度 9月前 225

在Vue 3中,如果你需要在页面跳转成功后加载一个外部的JavaScript文件,你可以使用Vue Router的全局后置钩子afterEach来实现。以下是一个简单的示例:

首先,定义你的Vue Router:

import { createRouter, createWebHistory } from 'vue-router'
 
const routes = [
  // 定义你的路由
]
 
const router = createRouter({
  history: createWebHistory(),
  routes
})

 

// 在路由切换后加载外部JS文件

router.afterEach((to, from) => {
  const script = document.createElement('script')
  script.type = 'text/javascript'
  script.src = 'https://your-external-js-file.js' // 替换为你的外部JS文件URL
  document.body.appendChild(script)
})
 
export default router

然后,在你的Vue应用中使用这个定义好的路由:

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
 
const app = createApp(App)
app.use(router)
app.mount('#app')

这样,每次页面跳转后,Vue Router都会自动加载你指定的外部JavaScript文件。确保替换script.src中的URL为你需要加载的外部JS文件的实际URL。


最新回复 (0)
返回
零下一度
主题数
931
帖子数
0
注册排名
1