vue地址栏直接输入路由无效问题的解决
vue 项目只要不是静态页面,一般都会和官方的路由管理器 vue-router 一起使用。
最近项目有一个需求,是在地址栏输入路由,跳转到对应路由组件,在开发环境中这样做是可以跳转的,但是项目打包后,通过地址栏跳转会报错。
因为 vue 在页面上显示哪个组件是根据 vue-router 进行控制的,在地址栏上直接输入路由名称,并不能触发 vue-router 的规则,所以只能通过监听地址的改变,利用回调函数在组件内部进行动态修改路由。
方式一:history 模式
vue-router 默认是 hash 模式,通过更改模式为 history 模式可以解决这个问题,但是这需要后端配合,更改服务端配置,虽然过程稍麻烦但也是一个办法,有兴趣的朋友可以查看往期文章 。
方式二:hashchange 事件
什么是 hash?
hash 就是 URL 地址中 # 字符后面的字符串。
更改它不会导致整个页面重新加载,而且可以定位到元素 id 或 name 与之相同的位置(锚点)。
window.location.hash
可以获取到 hash。比如 localhost:8080/#/abcde 的 location.hash="#/abcde"。
通过监听 hash 的状态,来动态修改 vue-router 的路由,是页面进行组件切换,这样就不会导致页面报错或 404 了。
当 hash 被修改时,将触发 hashchange 事件(IE8 +支持):
window.addEventListener('hashchange',function(e) { console.log(e.oldURL); console.log(e.newURL) },false);
所以在 App.vue 中添加此事件:
mounted(){ window.addEventListener('hashchange',()=>{ var currentPath = window.location.hash.slice(1); // 获取输入的路由 if(this.$router.path !== currentPath){ this.$router.push(currentPath); // 动态跳转 } },false); }
这样即可解决,在地址栏输入路由跳转无效问题。
补充:Vue路由――ie上地址栏输入路由页面不更新
情景:在ie11上从当前A页面(/a)跳转B页面(/b),在地址栏直接修改路由回车跳转B页面,发现页面还是A页面,但是地址栏地址已经是B页面地址。而且控制台并无报错。
解决方法:在App.vue中添加判断ie加手动修复:
mounted () { if (!!window.ActiveXObject || 'ActiveXObject' in window) { window.addEventListener('hashchange', () => { let currentPath = window.location.hash.slice(1) if (this.$route.path !== currentPath) { this.$router.push(currentPath) } }, false) } }
onhashchange事件ie8就已经支持了。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
- 解决了浏览器URL地址栏直接输入get参数值包含中文时的urlencode编码格式问题
- Nginx配置React项目Url后直接输入路由路径时报404问题的解决
- 【VUE】在vue中使用@scroll监听滚动事件,@scroll无效问题解决!
- 用了phpstudy继承环境以后,输入127.0.0。1直接跳转项目网站,不能跳转目录问题解决
- vue中设置height:100%无效的问题及解决方法
- Java解决在浏览器地址栏中输入url访问action的问题以及拦截方法过滤的简易实现
- 解决vue-cli在ie9+中无效的问题
- 解决tomcat地址栏输入中文出现找不到路径,路径乱码问题
- 解决使用vue.js路由后失效的问题
- dos窗口下输入adb无效的问题及解决办法
- 解决“vue-router子路由默认视图不显示”问题
- Java解决在浏览器地址栏中输入url访问action的问题以及拦截方法过滤的简易实现
- vue 路由嵌套高亮问题的解决方法
- windows下命令行下输入python文件名直接执行的问题解决
- 解决错误:此用户名包含无效字符,请输入有效的用户名。wordpress不能注册中文用户名的问题
- 用DIV遮罩解决鼠标直接勾选checkbox无效的问题
- vue-router同一路由地址同页面切换无效解决
- onethink 路由规则无效问题解决
- vue获取input输入值的问题解决办法
- 解决Vue在封装了Axios后手动刷新页面拦截器无效的问题