vue项目在ie11中,不显示App.vue中的router-view视图,初步怀疑是vue路由问题?

南朝
  • 13

在chrome等主流浏览器中是没有任何问题的,但是碰到了ie11浏览器白屏兼容问题,目前的情况是:
可以显示App.vue根视图中的标签,但是无法显示<router-view></router-view>视图,也就是路由跳转是无效的。
项目是用vue cli搭建的,下面给大家看下初步情况和报错:
这是目前App.vue页面的代码结构

clipboard.png
router-view目前所对应的路由页面是index首页,这是首页代码结构:

clipboard.png

在正常的浏览器中,展示效果是这样的:

clipboard.png
但是在ie11浏览器中,是这样的,中间的视图层没有进去,在元素审查中也看不到router-viewde所对应的元素

clipboard.png
然后这个是控制台的报错,只要一进行路由跳转,就会报这个错:

clipboard.png
有碰到过相同情况的大佬吗,我已经被ie的兼容问题折腾大半天了,目前只把问题定位到路由这里,而提示的这个“strict 模式下不允许分配到只读属性”,目前没有什么头绪,大家有什么解决方案吗

回复
阅读 2k
2 个回答

目前已经解决了
最开始的时候,是ie直接白屏,原因是将axios请求封装到单独的外部js文件中导致的,个人暂时也不太清楚为什么在外部会导致ie白屏问题;
而问题描述中出现的route-view不显示的问题,确实是路由导致的,因为在main.js中写了一个路由守卫,其中的某一个值在某些情况会变成undefined,导致ie不能显示;
所以目前的解决办法,将axios写在了vue项目中的main.js文件中,同时使用axios拦截器进行用户权限拦截,没有使用vue的路由守卫了;
其余的兼容ie的一些操作,就是网上说的比较多的使用babel-polyill可以解决,注意好自身项目的配置即可。

有个 babel-polyfill 兼容IE 的 你可以安装下试试

npm install --save babel-polyfill

main.js里

import 'babel-polyfill'

webpack.base.conf.js 替换到entry部分

  entry: {
    // app: './src/main.js'
    app: ["babel-polyfill", "./src/main.js"]
  },

试一下

你知道吗?

宣传栏