vue动态加载JS并防止路由多次访问时重复加载

做项目可能会遇到这种情况：我们需要引入url地址的JS且只需要在某个组件使用的时候动态引入，实现了这个功能还会有一个问题，当你不关闭浏览器的情况下使用路由功能多次访问这个页面时，由于挂载了动态加载JS的方法，因此会导致script标签不停的地叠加，假如有某个用户进行了上述操作，你的页面将被script标签撑爆，本项目致力于解决此问题

README IN ENGLISH

npm install q --save 文件创建

为方便后续的全局引用，请在src目录下新建一个loadResource.js文件文件名非强制

注意：此方法适用于无路由功能的情况，适用路由功能的移步至下文

//引入Q const Q = require('q'); /** * * @param url 导入js的url地址 * @returns {*} export此函数方便全局调用 */ export default function asyncLoadJs(url,id) { return Q.Promise((resovle, reject) => { //创建script标签 let script = document.createElement('script'); script.type = 'text/javascript'; script.src = url; script.id = id; //添加标签到body尾部 document.body.appendChild(script); script.onload = () => { resovle(); }; script.onerror = () => { reject(); } }) } Vue动态加载JS（有路由）

//引入Q const Q = require('q'); /** * * @param url 导入js的url地址 * @param id script标签的id（必须保证唯一性） * @returns {*} export此函数方便全局调用 */ export default function asyncLoadJs(url, id) { return Q.Promise((resovle, reject) => { let srcArr = document.getElementsByTagName('script'); let hasLoaded = false; for (let i = 0; i < srcArr.length; i++) { hasLoaded = srcArr[i].src === url; // 如果找到了重复的js标签将它删除 if (hasLoaded) { document.getElementById(id).remove(); } } //创建script标签,并为此标签添加ID let script = document.createElement('script'); script.type = 'text/javascript'; script.src = url; script.id = id; //添加标签到body尾部 document.body.appendChild(script); script.onload = () => { resovle(); }; script.onerror = () => { reject(); } }) } 全局引入

在main.js中添加注：文件名需要与之前自己定义的js文件名前缀一致，prototype后面必须要加$，见示例

//动态引入js import asyncLoadJs from "@/loadResources"; Vue.prototype.$asyncLoadJs = asyncLoadJs; 使用示例

在mounted方法中参数一：url地址 参数二：id（必须保证唯一性，建议使用js文件的前缀名）

mounted() { //无路由引用 this.$asyncLoadJs("http://v.bootstrapmb.com/2020/2/c85i87390/plugins/dropify/dropify.min.js"); //有路由引用 this.$asyncLoadJs("http://v.bootstrapmb.com/2020/2/c85i87390/plugins/dropify/dropify.min.js","dropify"); },