鸿 网 互 联 www.68idc.cn

当前位置 : 主页 > 编程语言开发 > 技术问答 > >

【node.js web项目】解决路由默认是hash模式(带#)

来源:互联网 作者:佚名 时间:2018-01-30 09:58
【概念讲述】 1.什么是hash模式 Vue+WebPack项目,本身是一个单页应用。 vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载。虽然使用 vue-router 用于设置页面跳转时的路径,但实际是控制页面上

【概念讲述】

1.什么是hash模式

Vue+WebPack项目,本身是一个单页应用。

vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载。虽然使用 vue-router 用于设置页面跳转时的路径,但实际是控制页面上的组件切换。

 

详细讲解什么是 url hash 可以查看 《阮一峰博客中-url的井号》:

http://www.ruanyifeng.com/blog/2011/03/url_hash.html

 

【解决问题】

在项目结合express后,使用app中间件对路由进行匹配,发现当url带有#,如 http://localhost:8080/#/test/123

以下是我自己设置的app中间件

 

通过断点方式debug,发现不会对此请求进行匹配。

 

解决方式:

在创建VueRouter实例中,设置 mode 为 history 模式,利用 history.pushState API 即使 url 像正常的 url ( http://localhost:8080/test/123)

 

-------------------------------------------------------------------------------------

vue-router说明文档有详细讲解如何清除hash模式

https://router.vuejs.org/zh-cn/essentials/history-mode.html

 

网友评论
<