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



相关文章
|
1月前
|
JavaScript
在 Vue 中处理组件选项与 Mixin 选项冲突的详细解决方案
【10月更文挑战第18天】通过以上的分析和探讨,相信你对在 Vue 中使用 Mixin 时遇到组件选项与 Mixin 选项冲突的解决方法有了更深入的理解。在实际开发中,要根据具体情况灵活选择合适的解决方案,以确保代码的质量和可维护性。
87 7
|
12天前
|
缓存 前端开发 JavaScript
优化CSS和JavaScript加载
Next.js和Nuxt.js在优化CSS和JavaScript加载方面提供了多种策略和工具。Next.js通过代码拆分、图片优化和特定的CSS/JavaScript优化措施提升性能;Nuxt.js则通过代码分割、懒加载、预渲染静态页面、Webpack配置和服务端缓存来实现优化。两者均能有效提高应用性能。
|
1月前
|
前端开发 UED
Webpack 中处理 CSS 和图片资源的多 Loader 配置
【10月更文挑战第12天】 处理 CSS 和图片资源是 Webpack 配置中的重要部分。通过合理选择和配置多个 Loader,可以实现对这些资源的精细处理和优化,提升项目的性能和用户体验。在实际应用中,需要不断探索和实践,根据项目的具体情况进行灵活调整和优化,以达到最佳的处理效果。通过对 Webpack 中多 Loader 处理 CSS 和图片资源的深入了解和掌握,你将能够更好地应对各种复杂的资源处理需求,为项目的成功构建和运行提供坚实的基础。
59 1
|
1月前
|
前端开发
【CSS】纯css3螺旋状loading加载特效
【CSS】纯css3螺旋状loading加载特效
31 4
|
1月前
|
存储 JavaScript 前端开发
vue尚品汇商城项目-day05【30.登录与注册静态组件(处理公共图片资源问题)+31.注册的业务+登录业务】
vue尚品汇商城项目-day05【30.登录与注册静态组件(处理公共图片资源问题)+31.注册的业务+登录业务】
31 1
|
3月前
|
JavaScript
Vue3加载中(Spin)
该加载组件 `Spin.vue` 可高度自定义加载状态,包括是否显示加载 (`spinning`)、尺寸 (`size`)、描述文案 (`tip`)、加载指示符 (`indicator`) 及其颜色 (`color`) 和其他细节参数。支持多种加载样式如点、线、圆环等,并允许调整动画速度和初始旋转状态。组件基于 Vue 构建,易于集成到任何项目中,提供丰富的视觉反馈。
Vue3加载中(Spin)
|
1月前
|
JavaScript
Vue启动时报错的解决方案,以及解决相同路径跳转报错的问题
Vue启动时报错的解决方案,以及解决相同路径跳转报错的问题
243 0
|
3月前
|
容器
Vue3图片(Image)
该图片预览组件提供丰富的功能,包括设置鼠标悬浮预览文本、图像描述、尺寸调整、适应容器模式等。支持单张或多张图片展示,具备旋转、缩放、镜像等功能,并可通过键盘或滚轮控制。组件允许自定义多项属性,如图像地址、宽度、高度、边框显示等,并兼容多种使用场景,如相册模式和循环切换。组件内部使用了 Vue3 的 `Spin` 和 `Space` 组件以及 `add` 函数辅助实现。
Vue3图片(Image)
|
3月前
|
JavaScript API 容器
Vue3加载条(LoadingBar)
这是一个基于 Vue 的加载条组件,提供了丰富的自定义选项和方法。通过简单的 API,可以控制加载条的开始、结束及错误状态。支持设置容器类名、样式、颜色等属性,并可通过 `start`、`finish` 和 `error` 方法来触发不同状态。
Vue3加载条(LoadingBar)
|
1月前
|
JavaScript
vue尚品汇商城项目-day07【vue插件-48.(了解)图片懒加载插件】
vue尚品汇商城项目-day07【vue插件-48.(了解)图片懒加载插件】
34 0
下一篇
无影云桌面