思路分析:
通常在我们写js 的代码的时候都会加入 window.onload() 再onload 函数中写代码,这样做的意义就是能够在文档加载完成之后才执行js 代码。
而在用 jquery 时, 通常用的是 $(function () {}) 这样写的作用和onload 函数差不多,都是在文档加载完成之后自动执行。
问题出现了:
这就导致了函数的执行条件是文档加载完成时才会触发函数。
而在 vue 中,为了节省资源,vue-router 在跳转页面时,实际上是不跳转页面的,而仅仅是在原页面上改变一些内容,所以说,在 vue 中, 跳转到子路由,页面是不会刷新的,也就是说,onload的条件没有被触发。
而 amazeui 是基于jquery 的,jQuery 的 $(function () {}) 也是一样,在跳转到子路由时, 并没有刷新页面,也就是没有加载 amaze.min.js 的函数。
其实在模板里面, 也能看到一个现象,在刷新页面时,也能看到一闪而过的一个 大的 显然,amazeui 把select 重写了,但是并没有将原生的 select 标签改变,而是将其隐藏, 狸猫换太子,将一个新的 div 放在原来的 select 标签位置, 而在其中起重要作用的就是 js 但是 js 文件并没有重新加载,就导致了 select 标签并没有被替换成新的 select 控件。
解决方案在充当导航的组件中添加一个 method ,使router 在跳转子路由时, 刷新页面。
简单实现:
首先在充当导航跳转组件的 methods 里增加一个函数:
this.$router.go(0) 的意思是刷新页面。
然后在跳转的 router-link 标签上绑定事件函数: 这样, 在页面跳转之后,会刷新页面,页面内的外部资源重新加载,成功渲染。