vue项目中遇到的问题汇总

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

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认为是语法错误。

解决方案:
在这里插入图片描述
这种方式目前测试,所有浏览器都兼容。

评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值