vue 实现详情页面伪静态化，用日期当动态路由

路由设置

下面展示一些 内联代码片。

//path用这种写法是这个思路实现伪静态的核心
{
    path: '/news/:detailId',
    name: '文章详情',
    component: () => import('@/views/consultDetails')
}

列表页面跳转

toDetail(id,createdDate) {
   // createdDate是文章生成日期
   // id是文章id
   this.$router.push({name: '文章详情', params: {detailId: createdDate+id + '.html'}})
}

详情页面

//页面路径为 http://localhost:8081/news/2022031116560146.html
//2022031116560146由日期和id组成 我们需要把id提出来
created() {
    let detailId = this.$route.params.detailId.slice(14);
    let id = detailId.split(".");
    //获取文章详情数据
    this.getList(id[0]);
}

以上伪静态需求已经完成，但是这里会有一个坑，当你同一个路由的时候，只是参数变化了，变化后需要手动刷新，数据才出来，显然是达不到需求的

使用vue的watch监测路由变化，刷新页面数据

created() {
  let detailId = this.$route.params.detailId.slice(14);
  let id = detailId.split(".");
  this.getList(id[0]);
},
watch: {
  // 深度监听路由改变事件
  $route: {
    handler(val, oldVal) {
      let detailId = val.params.detailId.slice(14);
      let id = detailId.split(".");
      this.getList(id[0]);
    },
    deep: true,
    immediate: true,
  },
}