1 mounted钩子函数中请求数据导致页面闪屏问题
其实就是加载时机问题,放在created里会比mounted触发早一点,如果在页面挂载完之前请求完成的话就不会看到闪屏了
2 路由模式改为history后,除了首次启动首页没报错,刷新访问路由都报错。
必须给对应的服务端配置查询的主页面,也可以认为是主路由入口的引导。
官方文档也有:传送门 : Vue-Router history Mode
3 vuex中数据刷新消失的问题
解决方法是在获取到数据往 store 中存储时,利用 window.localStorage.setItem(‘key’, value) 也存储一份相同数据。当在获取数据时判断存储的数据是否为空(如果是数组就判断长度是否为0,总之这儿就是判断),若不为空(数组长度不为0)直接获取,否则利用 window.localStorage.getItem(‘key’) 来获取。
例如
vue组件中:
this.$store.commit('setUserId', item.id)
window.localStorage.setItem('userId', JSON.stringify(item.id))
store中:
getters: {
loginIn: state => {
let loginIn = state.loginIn
if (!loginIn) {
loginIn = JSON.parse(window.localStorage.getItem('loginIn') || null)
}
return loginIn
},
}
4 VUE项目不兼容IE浏览器问题
非常简单,只需要两步就能解决:
1、 安装插件babel-polyfill
npm install --save-dev babel-polyfill
2、在你的VUE项目的src目录下找到main.js
添加下面一行代码:
import 'babel-polyfill'
最后,重新打开浏览器,应该就能兼容打开页面了。
我目前发现的兼容性问题主要有两个方面:
第一:IE浏览器认为 `` (不是单引号是1键左边的按键)字符是非法字符。
解决方案就是使用 ‘’(英文单引号)替换 `` 符号,这里需要注意单引号换行时的时候需要 + ’ ’ ;尽量不要在标签里再使用 ‘’ 为标签属性赋值,尽量使用 " " 号。
第二:IE浏览器不支持对象简写形式,例如:

这种形式chrome,火狐,欧朋浏览器是支持的,但是IE认为是语法错误。
解决方案:

这种方式目前测试,所有浏览器都兼容。
本文汇总了Vue项目中的一些常见问题及解决方法,包括:1. 使用created钩子避免mounted时的闪屏问题;2. 解决Vue-Router history模式下刷新报错,需服务端配合设置主页面;3. 使用vuex时数据刷新消失,利用localStorage持久化数据;4. 解决VUE项目不兼容IE问题,引入babel-polyfill并调整语法;同时指出了IE的两个兼容性问题:非法字符和对象简写形式,并提供了相应的解决策略。
4777

被折叠的 条评论
为什么被折叠?



