基于vue hash模式的应用的混合app开发

1 基于vue hash模式的第一次访问页面流程如下

    url   http://192.168.1.168:8080/app/#/find =>浏览器中访问

          1 ）http://192.168.1.168:8080/app   向服务器端发起http请求 返回模板页面，执行app.vue  浏览器存储了一次           url 

                http://192.168.1.168:8080/app/#/find

          2 ) 单页应用 浏览器前端hash路由 访问 /#/find   浏览器又保存了一次url  http://192.168.1.168:8080/app/#/find

                这时候浏览器内保存了 两条一样的url路由 http://192.168.1.168:8080/app/#/find

     这个问题 在pc端是没什么大碍的 ，但是如果是混合app开发 与 小程序内嵌webview的情况   第一次加载的页面  需要回退两次才能关掉webview

    针对这个问题  给出一个可行的解决方案

           在app.vue中监听路由变换事件  然后进行处理这种情况

methods 定义方法

/**
* hash路由回退监控
* 基于hash 的路由 第一次会存储两条路由 回退就会回退两次 这里进行监听处理
*/
monitorRouterBack(){
window.onhashchange = function(event){
console.log('onhashchange',event.oldURL, event.newURL);
let newUrl = event.newURL;
let target = "/#/";
if(newUrl.lastIndexOf(target)==newUrl.length-target.length){
history.go(-2)
}
}
},

在 created中调用  this.monitorRouterBack() 即可  实战中测试 对app  小程序嵌入 基于vue hash路由的spa应用都有效

转载于:https://my.oschina.net/mirclewang/blog/3039355

• 点赞
• 收藏
• 分享
• 文章举报