vue 实现页面静态化. 已解决 不采用框架-前端-E先生的博客
Java
MySQL
大数据
Python
前端
黑科技
    首页 >> 互联网 >> 前端

vue 实现页面静态化. 已解决 不采用框架

[导读]:一、使用this.$router.push(location)来修改url,完成页面路由跳转 二、使用params来隐式传递url的参数,它类似post,url看不出,使用query来传递参数的话,类似get,url一定会被格式化为http://www.xxx.com/index?id=123,而不能自定义,以html后缀结...
  一、使用this.$router.push(location)来修改url,完成页面路由跳转
 
  二、使用params来隐式传递url的参数,它类似post,url看不出,使用query来传递参数的话,类似get,url一定会被格式化为http://www.xxx.com/index?id=123,而不能自定义,以html后缀结尾

示列:
 
  路由部分
  1. {
  2.  
    path: '/share/:detailId', // path用这种写法是这个思路实现伪静态的核心
  3.  
    name: 'detailLink',
  4.  
    component: ArticleDetail
  5. }
  列表页面事件跳转部分
checkDetail: async function (articleId, viewCount) {
      // 阅读量自增
      await countPageViews(articleId, Number(viewCount))
      // 伪静态路由跳转
      this.$router.push({name: 'detailLink', params: {detailId: articleId + '.html'}})
  }
  详情页面
created: function () {
    console.log(this.$route)
    let obj = {}
    obj.article_id = this.$route.params.detailId.slice(0, -5)
    // 取文章detail数据
    this.$store.commit('setArticles', obj)
},
  当你同一个路由的时候,只是参数变化了,变化后需要手动刷新,数据才出来,显然是有点bug

bug处理示列:
created: function () {
  this.getArticleDATA()
},
methods: {
  getArticleDATA: function () {
  let obj = {}
  obj.article_id = this.$route.params.detailId.slice(0, -5)
  // 取文章detail数据
  this.$store.commit('setArticles', obj)
  }
},
watch: {
  '$route': 'getArticleDATA'
},

本文来自E先生的博客,如若转载,请注明出处:https://www.javajz.cn

留言区

联系人:
手   机:
内   容:
验证码:

历史留言

欢迎加Easy的QQ