使用vue开发项目好几个了,自我感觉良好,但一直有个功能没用过,那就是vue-router的history模式。今天正好有点时间,用自己带的项目搞一搞,以为应该改动不大,结果,一搞就搞出事了。。。
首先,配置一下服务器吧,毕竟最近认真的研究了一番Nginx的配置,果断在自己项目下的虚拟主机里添加了如下配置:
location/ {
try_files$uri $uri/ /index.html;
}
然后开始搞前端代码了,先修改路由配置表:
然后,刷新页面,查看各个页面是否有异常,一番查看后,发现大部分都没问题,但是一个表单页,由于在路由中使用了params传递数据,路由变成了多级的,导致页面跳转异常,发送的请求都不对了。。。。。
在网上一顿查,没有什么进展,折磨了整整一个上午,抓耳挠腮,突然看到关于隐藏url中params参数的文章,发现可以试一试,万一能行呢,哎,死马当活马医。于是,动手修改代码。
首先,修改路由配置对象,添加name,并删除以冒号开头的路径参数:
然后,修改编程式页面导航:
以前是push拼凑的path:
this.$router.push({path:`edit-project/${row.id}`});
现在改成name和params:
this.$router.push({name:'edit-project',params:{id:row.id} });
然后问题迎刃而解:
url以前是:
http://localhost/#/edit-project/58
现在是:
http://localhost/edit-project
这样,路由跳转也正常了,页面中发送的请求也正常了,一切正常了,这意味着扫清了开启history模式的最后的障碍。
so cool, right ?
添加小白前端杂货铺,一起玩前端,看电影!
领取专属 10元无门槛券
私享最新 技术干货