Vue路由——ie上地址栏输入路由页面不更新

最新推荐文章于 2023-07-28 08:54:23 发布
最新推荐文章于 2023-07-28 08:54:23 发布
阅读量743 收藏
点赞数
分类专栏： 兼容性 vue.js javascript 文章标签： vue IE 兼容性
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_32526373/article/details/84324699
版权
本文介绍了在IE11浏览器中，Vue路由通过地址栏输入时页面无法更新的问题。在开发环境正常，但测试环境下存在兼容性问题。通过监听`onhashchange`事件并添加相关代码，成功解决了IE11下路由页面不更新的状况，表明IE浏览器对hash路由的兼容性和更新可能存在问题。
摘要由CSDN通过智能技术生成

Vue路由——ie上地址栏输入路由页面不更新

情景：在ie11地址栏上直接输入路由，开发环境页面能正常刷新，在测试环境上不更新也不报错。测试环境在火狐、chrome浏览器地址栏上直接输入路由能正常更新页面。但是在App.vue中添加以下代码后，测试环境在ie11也能正常更新页面。

mounted () {
   
   if (!!window.ActiveXObject || 'ActiveXObject' in window) {
   
        window.addEventListener
最低0.47元/天 解锁文章
水晶幕夜
关注
专栏目录
vue 直接输入路由地址进入_vue地址栏直接输入路由无效问题的解决
weixin_34581259的博客
12-23 2380
vue 项目只要不是静态页面，一般都会和官方的路由管理器 vue-router 一起使用。最近项目有一个需求，是在地址栏输入路由，跳转到对应路由组件，在开发环境中这样做是可以跳转的，但是项目打包后，通过地址栏跳转会报错。因为 vue 在页面上显示哪个组件是根据 vue-router 进行控制的，在地址栏上直接输入路由名称，并不能触发 vue-router 的规则，所以只能通过监听地址的改变，利用回...
vue地址栏直接输入路由无效问题的解决
10-17
主要介绍了vue地址栏直接输入路由无效问题的解决，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue路由切换，页面不更新?你可以试试这个方法
weixin_34161064的博客
01-21 861
前言 vue-router的切换不同于传统的页面的切换。路由之间的切换，其实就是组件之间的切换，不是真正的页面切换。这也会导致一个问题，就是引用相同组件的时候，会导致该组件无法更新，也就是我们口中的页面无法更新的问题了。 问题呈现 父组件，点击class=item的div跳转到相应点的页面 <template> <div class="nav"> <div...
vue-router在IE11中页面不跳转
weixin_34383618的博客
11-19 998
情景： IE11浏览器中，在进行正常页面跳转操作后（页面A跳转到页面B），点击浏览器的左上角的‘后退’按钮，点击后，可以看到url地址已经发生了变化（url由页面B变为页面A），hash值也已经是上一页的路由，但是浏览器显示的内容却没有发生变化（依旧是页面B）。若将url在一个新的选项卡中复制粘贴是可以打开页面的（页面A用当前url打开没问题）。 没有任何报错（页面A和页面B无任何js错误或者...
解决Vue项目统一url（兼容IE浏览器）
lzhlovelyl的博客
01-11 695
解决Vue项目统一url（兼容IE浏览器） const config = { url:‘http://127.0.0.1:8080’ } function bindToGlobal(obj, key) { if (typeof window[key] === ‘undefined’) { window[key] = {}; } for (let i in obj) { window[key][i]...
VUE路由-IE浏览器中的路由跳转后页面不变更问题
课后笔记
08-14 9974
情景： IE11浏览器中，在进行正常页面跳转操作后（页面A跳转到页面B），点击浏览器的左上角的‘后退’按钮，点击后，可以看到url地址已经发生了变化（url由页面B变为页面A），hash值也已经是上一页的路由，但是浏览器显示的内容却没有发生变化（依旧是页面B）。若将url在一个新的选项卡中复制粘贴是可以打开页面的（页面A用当前url打开没问题）。 没有任何报错（页面A和页面B无任何js错误或者...
解决vue 路由变化页面数据不刷新的问题
08-27
总结，解决Vue路由变化时页面数据不刷新的问题，关键在于正确监听路由变化并及时更新组件中的数据。这可以通过`watch`、`beforeRouteUpdate`或直接在`created`钩子中处理数据请求来实现。确保每次路由变化时，组件都...
Vue如何实现页面跳转路由，实现单页面跳转
weixin_54048131的博客
07-28 3061
使用location.href:npm i vue-router@3.5.2 -S
2022.7.12 vue项目开发中实现当前页面跳转并且不改变url
qq1830882455的博客
07-12 1707
vue开发页面内跳转
前端路由模式（hash和history）
weixin_64315174的博客
11-29 1146
前端路由模式（hash和history）
Vue项目在IE浏览器上路由跳转报错
MrQiu的博客
12-08 3048
Vue2.x 项目，登录成功之后跳转到主页面，其他浏览器都是可以的，只有 IE 不行。错误如下 [vue-router] Failed to resolve async component default: SyntaxError: 语法错误 [vue-router] uncaught error during route navigation: [object Error]{description: "语法错误", message: "语法错误", name: "SyntaxError", numbe.
vue-router在IE下不跳转
Annie的博客
05-16 4370
发现最近做的vue项目中，在IE浏览器下，当router改变时，虽然页面中的URL改变了，但页面并没有跳转。查阅资料后找到如下解决方案，在App.vue文件中的mounted里面添加如下代码。 function checkIE(){ return '-ms-scroll-limit' in document.documentElement.style && ...
vue路由，浏览器页面出现空白
weixin_42824291的博客
03-11 5182
在进行vue项目开发时，常用vue-router进行路由的导航，这种方式可以很好的进行路由和组件的匹配，但是当用户手动更改为未进行匹配的url时，系统找不到响应的组件进行页面渲染，就会出现空白页面。 导航守卫（常用） 可以使用 router.beforeEach 注册一个全局前置守卫： const router = new VueRouter({ ... })//添加路由代码 router.b...
vue地址栏直接输入路由无效问题
weixin_44389021的博客
04-17 4054
vue 项目只要不是静态页面，一般都会和官方的路由管理器 vue-router 一起使用。 最近项目有一个需求，是在地址栏输入路由，跳转到对应路由组件，在开发环境中这样做是可以跳转的，但是项目打包后，通过地址栏跳转会报错。 因为 vue 在页面上显示哪个组件是根据 vue-router 进行控制的，在地址栏上直接输入路由名称，并不能触发 vue-router 的规则，所以只能通过监听地址的改变...
解决IE浏览器，路由改变页面不改变
真真的博客
09-16 747
app.vue文件： const isIE = ( /MSIE (\d+\.\d+);/.test(navigator.userAgent) || ~navigator.userAgent.indexOf('Trident/') ) mounted() { if (isIE) { window.addEventListener('hashchange', ...
vue2 vue-router 在IE下不跳转问题
成茂峰
04-26 3467
问题： 使用vue-router 在IE下 a标签里的路由不跳转，火狐，chrome工作正常。 解决方式： 在App.vue 里增加判断IE浏览器手动修复…… 修改代码如下： src/App.vue <template> <div id="app"> <router-view/> </div> </template&gt...
vue - history模式下 - 微信浏览器中页面跳转url路径不变问题
Riona_cheng的博客
09-16 3507
微信浏览器中，history模式下复制url地址总是为最初进入页面时的地址
vue3 路由传参 不暴露地址栏
最新发布
06-12
在 Vue 3 中，使用路由传参时，如果你想避免直接在地址栏暴露参数，可以采用以下方法： 1. **使用 Query 参数**: 使用 `router.push` 或 `router.go` 时，你可以传递一个对象作为查询字符串（query params），如：...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值