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

你可能感兴趣的:(vue项目实现伪静态页)