vue应用静态化_vue项目实现伪静态页

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里面取到传参。