vue地址栏直接输入路由无效问题的解决
导读：本文共1680.5字符，通常情况下阅读需要6分钟。同时您也可以点击右侧朗读，来听本文内容。按键盘←（左） →（右） 方向键可以翻页。
摘要： vue 项目只要不是静态页面，一般都会和官方的路由管理器 vue-router 一起使用。最近项目有一个需求，是在地址栏输入路由，跳转到对应路由组件，在开发环境中这样做是可以跳转的，但是项目打包后，通过地址栏跳转会报错。因为 vue 在页面上显示哪个组件是根据 vue-router 进行控制的，在地址栏上直接输入路由名称，并不能触发 vue-router 的... ...
目录
(为您整理了一些要点),点击可以直达。
vue 项目只要不是静态页面，一般都会和官方的路由管理器 vue-router 一起使用。
最近项目有一个需求，是在地址栏输入路由，跳转到对应路由组件，在开发环境中这样做是可以跳转的，但是项目打包后，通过地址栏跳转会报错。
因为 vue 在页面上显示哪个组件是根据 vue-router 进行控制的，在地址栏上直接输入路由名称，并不能触发 vue-router 的规则，所以只能通过监听地址的改变，利用回调函数在组件内部进行动态修改路由。
vue-router 默认是 hash 模式，通过更改模式为 history 模式可以解决这个问题，但是这需要后端配合，更改服务端配置，虽然过程稍麻烦但也是一个办法，有兴趣的朋友可以查看往期文章 。
什么是 hash？
hash 就是 URL 地址中 # 字符后面的字符串。
更改它不会导致整个页面重新加载，而且可以定位到元素 id 或 name 与之相同的位置（锚点）。
window.location.hash 可以获取到 hash。比如 localhost:8080/#/abcde 的 location.hash="#/abcde"。
通过监听 hash 的状态，来动态修改 vue-router 的路由，是页面进行组件切换，这样就不会导致页面报错或 404 了。
当 hash 被修改时，将触发 hashchange 事件（IE8 +支持）：
所以在 App.vue 中添加此事件：
这样即可解决，在地址栏输入路由跳转无效问题。
补充：Vue路由——ie上地址栏输入路由页面不更新
解决方法：在App.vue中添加判断ie加手动修复：
onhashchange事件ie8就已经支持了。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
vue地址栏直接输入路由无效问题的解决的详细内容，希望对您有所帮助，信息来源于网络。