雷池WAF添加自定义规则时,当匹配目标是 url,匹配内容 包含 # 时,# 后面的内容会被忽略
原因
后面的部分不会被当作请求发送到服务器,部署在服务器侧的雷池自然也无法接收到。
解决方案
一般 vue 的哈希路由模式会出现这种情况,建议用户改用 vue 的 history模式
参考
在 Vue.js 中 Vue 路由管理器(Vue Router)支持两种模式:哈希模式和 HTML5 History 模式。默认情况下,Vue Router 使用哈希模式。
哈希模式(Hash Mode)
在哈希模式下,URL 的变化是通过 URL 中的 # 符号来实现的,这种模式不需要服务器配置。例如,当你访问 http://example.com/#/home 时,# 后面的部分(/home)就是路由的路径。
特点
兼容性:哈希模式在所有支持 HTML5 History API 的浏览器中都能工作,包括旧版浏览器。
无服务器配置:不需要服务器配置来处理路径,因为 # 后面的部分不会被当作请求发送到服务器。
SEO 问题:由于 URL 中的 # 部分被视为 fragment(片段),它不会被搜索引擎索引,这可能会影响网站的 SEO。
HTML5 History 模式
HTML5 History 模式使用 HTML5 的 History API 来改变 URL,不包含 #。例如,http://example.com/home 。 这种模式下的 URL 更加美观,也有利于 SEO。
特点
美观:URL 看起来更干净,没有 #。
SEO 友好:由于 URL 变化被浏览器视为历史记录的一部分,这有助于搜索引擎优化。
服务器配置:需要服务器配置来确保所有路径都返回同一个 index.html 文件,以便 Vue Router 能够处理路由。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构