一杯茶,一包烟,一个bug改一天……
吾日三省吾身,为甚么它能实现,为神马它不实现……
#### 这里记录下偶然会遇到的奇怪的问题
目录
路由跳转后vue页面样式后混乱问题
有个组件样式没有加scoped,加载这个组件之后,有些同类名样式或标签选择器定义的样式会成为全局样式,这就会导致其他组件样式在初始加载时被覆盖。只需要将组件style加上scoped就可以解决该问题。
scoped 将当前组件样式定义为只在当前页面内生效
动态绑定图片路径无法渲染
如果遇到这种情况<img :src="item.src">
你可以改变思路,将代码改成
<img :src="require('../../assets/imgs/'+item.menu_url+'.png')">
//动态绑定src,使用require引入变量,甚至还可以拼接字符串,nice!
跳转当前页面页面不刷新
有时候使用动态路由来跳转当前页面,但页面并没有刷新怎么办?
这是vue-router’智能’的发现你跳转的组件是重复的,于是它就复用了……
解决方法:
- 使用watch监听$route,路由改变就请求数据
- 给router-view+独立的key值,可以是$route.fullpath,这样跳转的页面就都是独立的。
We’re sorry but blog doesn’t work properly without JavaScript enabled. (解决方案)
项目跑不起来,你从以下几点入手
-
vue.config.js中配置的跨域无法应用于生产环境
解决思路:
a.根据不同环境设置不同的baseUrl,生产环境配置不需要跨域的url
b.配置nginx代理
可做参考 -
路由设置为"hash"模式
-
更改publicPath/baseUrl
vue
vue 修改一个对象的值另一个对象跟着改变
data中定义的数据,你把它赋值给另一个变量,同样是浅拷贝,复制的是其引用地址,需要改成深拷贝才行
JSON.parse(JSON.stringify())
最佳解决思路!
vue模板中空格转义符不生效 
vue.config.js中添加
chainWebpack: config => {
// 解决 页面中的空格占位符被清除的问题
config.module
.rule('vue')
.use('vue-loader')
.loader('vue-loader')
.tap(options => {
options.compilerOptions.whitespace = 'preserve'
return options
})
.end()
},
然后,关闭进程,重新运行(npm run serve)。
数据渲染后样式未成功渲染
场景:element 表格交换数据位置导致数据显示不全,分析后得知css样式加载未生效。
解决思路:表格内容套个template 加上v-if 再数据请求完成后重新执行一遍v-if的生命周期,条件自己定义。我用的是loading动画。
<table>
<template v-if="!loading">
>>>>内容
</template>
</table>