vue-router实现博客系统文章页面的伪静态
express+vue搭建个人博客,如何实现博客文章的伪静态,让每一篇文章都相当于是一个html页面,方便百度引擎收入呢?经过两天的摸索,终于找到了解决办法:利用vue-router的params属性来实现。vue-router有两种传参方式,一种是query属性配合着path属性,一种是params属性配合着name属性,详细用法可去官网上看。query的传参会跟在请求的网址后面,到新的...
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:{}}
更多推荐
所有评论(0)