History与Params的相爱相杀

使用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 ?

添加小白前端杂货铺，一起玩前端，看电影！