vue-router实现博客系统文章页面的伪静态

express+vue搭建个人博客，如何实现博客文章的伪静态，让每一篇文章都相当于是一个html页面，方便百度引擎收入呢？

经过两天的摸索，终于找到了解决办法：利用vue-router的params属性来实现。

vue-router有两种传参方式，一种是query属性配合着path属性，一种是params属性配合着name属性，详细用法可去官网上看。query的传参会跟在请求的网址后面，到新的页面中刷新传参也还在。而用params传参不会跟在请求的后面，到新的页面刷新后参数会消失。其实，params还有一种用法，可以让参数跟在请求的后面，刷新页面参数也不会消失。（那为什么不利用query实现伪静态呢，可能因为query默认跟参数，参数和请求之间会有个问号隔开的原因吧）

 

在路由中这样配置：

{
  path:"/detail/:detailId",
  name:"Detail",
  component:Detail
}

然后在点击事件跳转的时候这样传参

let detailId=id+".html"
this.$router.push({name:"Detail",params:{detailId:detailId}})

假如点击的那篇文章的id是123，那么跳转之后的详情路由就是/detail/123.html,可以用this.$route.params.detaiId来获取参数，然后通过字符串操作去掉.html得到真正的id，然后就可以愉快的通过这个id去数据库里面获取这篇文章的所有信息来展示了。

值得注意的是，这样带参数的请求在将这个id传到后端的时候，后端请求里面的req.body是个空对象，里面没有传过去的值，但是可以在req.query里面取到传参。

注意：vue-router中path和name的区别，如果是path，格式是{path：“/Detail”，query:{}}