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',()=>{
varcurrentPath=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'inwindow){
window.addEventListener('hashchange',()=>{
letcurrentPath=window.location.hash.slice(1)
if(this.$route.path!==currentPath){
this.$router.push(currentPath)
}
},false)
}
}
onhashchange事件ie8就已经支持了。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。