• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • dedecms
  • ecshop
  • z-blog
  • UcHome
  • UCenter
  • drupal
  • WordPress
  • 帝国cms
  • phpcms
  • 动易cms
  • phpwind
  • discuz
  • 科汛cms
  • 风讯cms
  • 建站教程
  • 运营技巧
您的位置:首页 > CMS教程 >建站教程 > Uniapp发布为H5版本时如何隐藏访问路径的#符号

Uniapp发布为H5版本时如何隐藏访问路径的#符号

作者:站长图库 字体:[增加 减小] 来源:互联网 时间:2022-04-29

站长图库向大家介绍了Uniapp发布,隐藏访问路径#等相关知识,希望对您有所帮助

uniapp开发移动端APP、小程序已经非常流行。有时候我们需要通过uniapp打包生成H5/wap版本让H5功能能同步APP小程序的功能,而不是重新写一个端的功能模块代码。

但是发现在开发H5版本中,我们的页面访问路径都会带上一个“#”号,例如:https://h5.xxxx.com/#/pages/index/index , 这个不仅影响美观,还会在某些场合被过滤到“#”号导致路由错误,比如我们在做H5端的微信公众号登录的时候,返回地址带有“#”号就会被自动过滤掉,导致无法回调到正确页面~~

解决办法如下:

一、使用Hbuilder 工具打开manifest.json 文件,定位到:H5配置->路由模式->选择 history 模式


612b4b92efc37.png


这时您会发现打开页面后,已经去掉了了“#”号,且能正常访问,但是当我们刷新页面后,却报了“404”错误, 我们睁大眼睛仔细检查是不是网址错了,发现网址并没有错!! 这就奇怪了!

不急,要解决上面这个问题,你需要了解下面的内容:

1)hash ——即地址栏URL中的#符号。 hash 虽然出现URL中,但不会被包含在HTTP请求中,对后端完全没有影响,因此改变hash不会重新加载页面。

2)history ——利用了HTML5 History Interface 中新增的pushState() 和replaceState() 方法。需要特定浏览器支持 history模式,会出现404 的情况,需要后台配置。

3)hash模式下,仅hash符号之前的内容会被包含在请求中,如 https://www.shopwind.net, 因此对于后端来说,即使没有做到对路由的全覆盖,也不会返回404错误;

4)history模式下,前端的url必须和实际向后端发起请求的url 一致,如https://www.shopwind.net/a/ 。如果后端缺少对/a 的路由处理,将返回404错误


二、服务器配置

打包好H5代码上传到服务器还需要做伪静态的配置。

history模式下配置nginx

location / {    try_files $uri $uri/ /index.html;}

history模式下配置Apache

RewriteEngine OnRewriteBase /RewriteRule ^index\.html$ - [L]RewriteCond %{REQUEST_FILENAME} !-fRewriteCond %{REQUEST_FILENAME} !-dRewriteRule . /index.html [L]


分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • Uniapp发布为H5版本时如何隐藏访问路径的#符号

相关文章

  • 2022-04-29Illustrator实例教程:抛光浮雕样式制作立体字
  • 2022-04-29Photoshop详细解析置换滤镜的工作原理
  • 2022-04-29详解关于laravel自动路由
  • 2022-04-29如何给WordPress主题评论框加上阿鲁表情
  • 2022-04-29node.js 基于 STMP 协议和 EWS 协议发送邮件
  • 2022-04-29Linux怎么查看程序是否在运行状态
  • 2022-04-29百度蜘蛛是怎样来判断文章质量的?
  • 2022-04-29PHP开发api接口验证实例
  • 2022-04-29如何清除CentOS6或CentOS7上的磁盘空间
  • 2022-04-29DEDECMS如何设置搜索页热门搜索词

文章分类

  • dedecms
  • ecshop
  • z-blog
  • UcHome
  • UCenter
  • drupal
  • WordPress
  • 帝国cms
  • phpcms
  • 动易cms
  • phpwind
  • discuz
  • 科汛cms
  • 风讯cms
  • 建站教程
  • 运营技巧

最近更新的内容

    • 织梦CMS如何转换其他程序
    • wordpress前台空白问题的解决方法
    • 网站快照停滞不前的N种影响因素
    • PhotoShop制作漂亮的蓝色发光文字效果教程
    • 分享封装的一个PHP微信支付的类库(扫码、H5、小程序)
    • 免费DedeCMS版QQ登陆插件FOR V5.5 V5.6 V5.7
    • PHP怎么返回四位数不满补零
    • Photoshop制作浮雕立体效果的艺术字
    • 分享Laravel7消息通知日期序列化解决方案
    • Laravel实现谷歌点图验证码【推荐】

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有