Vue 路由跳转的时候遇到一些图片CSS不加载 解决方案

简介: 通常在我们写js 的代码的时候都会加入 window.onload() 再onload 函数中写代码,这样做的意义就是能够在文档加载完成之后才执行js 代码。

思路分析:


通常在我们写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 标签上绑定事件函数: 这样, 在页面跳转之后,会刷新页面,页面内的外部资源重新加载,成功渲染。image.pngimage.png



相关文章
|
5月前
|
JavaScript
在 Vue 中处理组件选项与 Mixin 选项冲突的详细解决方案
【10月更文挑战第18天】通过以上的分析和探讨,相信你对在 Vue 中使用 Mixin 时遇到组件选项与 Mixin 选项冲突的解决方法有了更深入的理解。在实际开发中,要根据具体情况灵活选择合适的解决方案,以确保代码的质量和可维护性。
208 7
|
4月前
|
前端开发
在Webpack配置文件中,如何配置loader以处理其他类型的文件,如CSS或图片
在Webpack配置文件中,通过设置`module.rules`来配置loader处理不同类型的文件。例如,使用`css-loader`和`style-loader`处理CSS文件,使用`file-loader`或`url-loader`处理图片等资源文件。配置示例:在`rules`数组中添加对应规则,指定`test`匹配文件类型,`use`指定使用的loader。
|
3月前
|
JavaScript 容器
jquery和CSS3图片排序过滤搜索插件
Filterizr是一款jquery和CSS3图片排序过滤插件。它可以对一组图片进行排序,按条件过滤和按关键字搜索。并在显示结果时使用指定的CSS3动画过渡效果。
41 2
|
4月前
|
前端开发 UED 开发者
CSS Sprites和图标字体在网页图标加载优化中的应用。CSS Sprites通过合并多图标减少HTTP请求,提升加载速度
本文探讨了CSS Sprites和图标字体在网页图标加载优化中的应用。CSS Sprites通过合并多图标减少HTTP请求,提升加载速度;图标字体则以字体形式呈现图标,便于调整样式。文章分析了两者的优缺点及应用场景,并提供了应用技巧和注意事项,旨在帮助开发者提升页面性能,改善用户体验。
60 5
|
4月前
|
编解码 前端开发 UED
探讨了CSS媒体查询在移动端开发中的应用,介绍了媒体查询的基本概念、常见条件及其在响应式布局、导航菜单、图片优化和字体调整等方面的具体应用
本文深入探讨了CSS媒体查询在移动端开发中的应用,介绍了媒体查询的基本概念、常见条件及其在响应式布局、导航菜单、图片优化和字体调整等方面的具体应用。通过实际案例分析和注意事项的讨论,旨在帮助开发者更好地理解和运用媒体查询,提升移动端用户体验。
89 4
|
4月前
CSS3实现的九宫格图片鼠标悬停去除遮罩层源码
CSS3实现的九宫格图片鼠标悬停去除遮罩层源码
31 0
CSS3实现的九宫格图片鼠标悬停去除遮罩层源码
|
4月前
纯css3加载loading发光变色动画代码
纯css3加载loading发光变色动画特效代码是一款基于css3 keyframes属性实现的发光变色圆点串联旋转loading加载动画
49 2
|
4月前
|
Web App开发 前端开发 iOS开发
CSS加载动画大全 126种
CSS加载动画大全是一个css Loaders加载动画特效汇总,一共包含126种加载动画效果,不同样式不同图案,简单实用,一览包含所有,会让你在等待的过程中,体验视觉盛宴,给用户不一般的加载体验,欢迎下载试试!代码适用浏览器:搜狗、360、FireFox(建议)、Chrome、Safari、Opera、傲游、世界之窗,是一款不错的的特效插件,希望大家喜欢!
100 2
|
4月前
|
缓存 前端开发 JavaScript
优化CSS和JavaScript加载
优化CSS和JavaScript加载
|
4月前
|
缓存 前端开发 JavaScript
优化CSS和JavaScript加载
Next.js和Nuxt.js在优化CSS和JavaScript加载方面提供了多种策略和工具。Next.js通过代码拆分、图片优化和特定的CSS/JavaScript优化措施提升性能;Nuxt.js则通过代码分割、懒加载、预渲染静态页面、Webpack配置和服务端缓存来实现优化。两者均能有效提高应用性能。

热门文章

最新文章