美文网首页
vue项目实现伪静态页

vue项目实现伪静态页

作者: 奔跑的丸子129 | 来源:发表于2019-05-05 16:19 被阅读0次

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项目实现伪静态页

    vue开发单页面应用时,如何实现博客文章的伪静态,让每一篇文章都相当于是一个html页面,方便百度引擎收入呢? 经...

  • 伪静态实现

    伪静态实现 伪静态:没有静态文件的静态化 伪静态实现【1代码实现】比如这个网页http://www..net/so...

  • vue + video.js实现视频列表页(多个视频)

    vue + video.js实现视频列表页 vue项目中做一个视频列表页,本来用原生video标签来实现,由于考虑...

  • 微信踩坑文章

    1、vue2 spa单页项目实现微信支付2、vue项目修改微信文章标题deboyblog/vue-wechat-t...

  • 真伪静态

    有同学问到 真静态 和 伪静态,画图说明: 1.服务端真伪静态真静态 和 伪静态 2.客户端也可以通过路由来实现伪静态

  • 真静态和伪静态的优缺点

    真静态和伪静态的优缺点 真静态和伪静态的优缺点html静态页(真静态)的好处有三点;一是减少服务器对数据响应的负荷...

  • echarts 内存泄漏

    最近使用vue + Echarts 实现vue项目的数据可视化功能的时候,在ios环境下,点击列表页进入详情页几次...

  • 前端vue项目实现单页打印功能

    前端vue项目实现单页打印功能 vue-print-nb插件:这是用于打印,简单,快速,方便,轻便的指令包装。安装...

  • vue组件tabbar使用方法详解

    在做项目时,实现tab页时有tabbar,其他页面没有,则可以如下操作: 在App.vue中 tabbar.vue...

  • nginx 解决伪静态,服务器500错误 --- 2021-11

    个人项目nginx配置项目实例代码(解决伪静态,服务器500错误)

网友评论

      本文标题:vue项目实现伪静态页

      本文链接:https://www.haomeiwen.com/subject/yqthoqtx.html