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

最新推荐文章于 2025-05-07 16:50:33 发布

转载最新推荐文章于 2025-05-07 16:50:33 发布 · 256 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/mirclewang/blog/3039355

文章标签：

#javascript #移动开发 #前端 #ViewUI

本文介绍了一个关于Vue单页应用中基于hash模式的路由导致的双回退问题及解决方案。在混合APP开发与小程序内嵌webview环境下，首次加载页面需要回退两次才能关闭webview。通过在app.vue中监听路由变化并处理，可以避免此问题，适用于app和小程序嵌入的SPA应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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