vue 直接输入路由地址进入_Vue地址栏直接输入路由无效问题的解决_茜茜_前端开发者...

路由管理器

最近项目有一个需求，是在地址栏输入路由，跳转到对应路由组件，在开发环境中这样做是可以跳转的，但是项目打包后，通过地址栏跳转会报错。

因为

方式一：history 模式

方式二：hashchange 事件

什么是 hash？

hash 就是 URL 地址中 # 字符后面的字符串。

更改它不会导致整个页面重新加载，而且可以定位到元素 id 或 name 与之相同的位置(锚点)。

window.location.hash可以获取到 hash。比如 localhost:8080/#/abcde 的 location.hash=”#/abcde”。

通过监听 hash 的状态，来动态修改

当 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); // 获取输入的

这样即可解决，在地址栏输入

补充：Vue

情景：在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就已经支持了。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持