vue 关于对 js 事件失效的补充（外部资源加载问题）

vue 关于对 js 事件失效的补充

前言

前几天遇到了amazeui的 js 事件失效问题，写了一篇文章做了一些分析

链接： https://blog.youkuaiyun.com/qq_41399901/article/details/88778835

目前…

而在最近看有关 amazeui 组件的问题时，在官网发现了官方给出的关于js 事件失效的答复：
显然，之前的分析思路是正确的，动态插入的 dom 事件是不会绑定事件的。

这也就导致了在使用 vue-router 时， 跳转后的页面部分没有相应的绑定事件，从而导致事件失效。

解决办法

amazeui 官方的意思是在插入新的 dom 时， 要同时初始化事件，绑定到 dom 上。

所以，我们可以根据官方给出的 初始化组件 函数，对 js 插件进行初始化。

之前我想到过两种方法：

---

1.添加一个刷新页面的方法
2.在跳转页面后重新加载 amaze.min.js

---

这两种方法都有很大的缺点——会消耗很多资源
仅仅为了一个按钮的样式、一个下拉框的下拉 显然是不值得的。

鉴于 amazeui 官方的答复，暂时想出一个折衷一点的方案，即再 初始化组件。

问题

但问题也随之而来，vue 是一个构建数据驱动的 web 界面的渐进式框架，mvvm 模型的它并不能直接操作 dom 元素，而且由于 amazeui 是基于 jquery 的，要是想要在组件中重新初始化组件，不但要用vue不推荐的对 dom 元素进行操作 还要引入 jquery 。

---

我所想到的方法是这样的：
1.先建一个 js 文件，在其中初始化组件。
2.在跳转页面时，用 methods 或者 mounted 创建 script 标签（和原来的第二种方法相同）

实现起来是这样的

首先新建一个 js 文件，在其中加入初始化函数

然后

在需要重新初始化的组件里加入代码，引入刚刚创建的 js 文件

---

又想到一个新方法…
将组件初始化代码放到一个 js 文件里面， 再用vue-router 的beforeEach 钩子，在每次跳转页面时，引入 js 文件。

即

router.beforeEach((to, from, next) => {
  if (to.matched.some(r => r.meta.requireAuth)) {
    if (store.state.token) { // 登陆的 token..
      const s = document.createElement('script')  // 插入代码
      s.type = 'text/javascript'
      s.src = '/static/js/add.js'
      document.body.appendChild(s)
      next()
    } else {
      next({
        path: '/login',
        query: {
          redirect: to.fullPath
        }
      })
    }
  } else {
    next()
  }
})

或者用 afterEach

router.afterEach((to, from) => {
	const s = document.createElement('script')
	s.type = 'text/javascript'
	s.src = '/static/js/add.js'
	document.body.appendChild(s)
	next()
)}

大功告成…