动态引入的背景

在vue项目开发中只有一个index.html 

这个时候，如果我们要做到只在指定路由组件加载的时候，才加载指定的外部js 

并且在离开指定路由或者组件的时候，删除掉引入的js

动态引入

    const scriptInfo = document.createElement("script")
    s.type = "text/javascript"
    scriptInfo.setAttribute("data-callType","callScript")
    scriptInfo.src = "需要引入的js路径"
    document.head.appendChild(scriptInfo)
  • 使用document.createElement 创建指定元素
  • setAttribute 动态设置属性
  • document.head 获取 head
  • 使用appendChild 添加 script 到  head中

动态删除


    let callScript = document.querySelector("script[data-callType='callScript']")
    document.head.removeChild(callScript)
  • 使用document.querySelector 获取到元素
  • 使用removeChild 删除元素
     

# vue.js # javascript # 前端
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue