vue解决微信浏览器自带导航条造成项目tabbar不显示的问题

﹏ヽ暗。殇╰゛Y 2023-02-18 03:05 42阅读 0赞

案例如下：  
1）在微信浏览器打开此页面，项目自身带tabbar，包括首页，发现 我的  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1YW5xaTMxMzE_size_16_color_FFFFFF_t_70]  
2）点击为您推荐的第一个 pzm测试-食-图片，跳转到其他页面，下图为跳转页面，可以看到下方的图片已经出现了微信浏览器自带的导航条，用于前进后退。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1YW5xaTMxMzE_size_16_color_FFFFFF_t_70 1]  
3）然后点击上方红色框的返回键，得到下图，出现了微信浏览器自带的导航条，而我自己的首页，发现，我的导航条没了！！然后我在android机上测试是有的 ios上没有项目的tabbar  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1YW5xaTMxMzE_size_16_color_FFFFFF_t_70 2]

**解决方法：**  
参考文章：[https://www.jianshu.com/p/6df78215d769][https_www.jianshu.com_p_6df78215d769]，  
在App.vue中加入下面代码：  
![在这里插入图片描述][20200615161849156.png]  
这段代码的意思是当进入项目，如果是ios，自动打开微信浏览器自带导航条就可以了，造成上面的原因是原因微信浏览器的原因，第一次进入微信自带的导航条是不显示的，然后跳转到别的页面在返回就会造成项目的布局有问题，导致项目的tabbar不显示  
window.history.pushState(\{\}, “title”, “\#”) 这段代码的意思是给浏览器塞一个空的路径让她显示就行啦

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1YW5xaTMxMzE_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2020061516124871.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1YW5xaTMxMzE=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1YW5xaTMxMzE_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200615161455785.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1YW5xaTMxMzE=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1YW5xaTMxMzE_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/2020061516161798.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1YW5xaTMxMzE=,size_16,color_FFFFFF,t_70
[https_www.jianshu.com_p_6df78215d769]: https://www.jianshu.com/p/6df78215d769
[20200615161849156.png]: https://img-blog.csdnimg.cn/20200615161849156.png