VUE中vue-router的HTML5 History模式设置

 时间:2024-10-14 03:11:48

1、mode默认是hash模式,画风是这样的:

VUE中vue-router的HTML5 History模式设置
VUE中vue-router的HTML5 History模式设置

2、使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载

3、如果不想要很丑的 hash,我们可以用路由的history 模式,上面的坑就跳过去了,具体是这样的:

VUE中vue-router的HTML5 History模式设置

4、这种模式充分利用history.pushStateAPI 来完成 URL 跳转而无须重新加载页面。

5、当你使用 history 模式时,URL 就像正常的 url,例如http://domain.com/first,也好看!让我们执行npm run dev看看测试效果吧

VUE中vue-router的HTML5 History模式设置

6、部署到服务器上也貌似问题不大,然而一刷新,就崩溃了

VUE中vue-router的HTML5 History模式设置

7、原来这样的URL,服务器(这里用的是nginx作为web服务器)根本不认识,解决方法就是对ngi艘绒庳焰nx设置try_files指令,如果当前的URL找不到就调用rewrites模块重写url。到此问题解决,终于可以愉快的和SPA应用玩耍了。

VUE中vue-router的HTML5 History模式设置
  • vue-devtools 使用技巧
  • 如何javascript获取css中的样式
  • 在laravel控制器中怎样使用模型?
  • ecplise使用及程序报错排查方法
  • 使用siege进行压力测试
  • 热门搜索
    6.1儿童节手抄报 我爱祖国手抄报 庆六一手抄报 手抄报设计 环保手抄报内容 手抄报内容 绿色环保手抄报 小学生安全手抄报 关于节约用水的手抄报 预防传染病手抄报