获取详情页id

详情页路由（index.js）

{
          path: '/mediaContent/:id',
          name: 'mediaContent',
          component: MediaContent
        },

列表页（mediaManagement.vue）

<div>
      <el-table :data="titleData" style="width: 80%" class="tableStyle">
        <el-table-column prop="mediaTitle"></el-table-column>
        <el-table-column prop="mediaAbstract"></el-table-column>
        <el-table-column>
          <template slot-scope="scope">
            <el-button type="text" @click="detail(scope.row)">更多</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    detail(row) {
      //查看详情
      this.$router.push({ path: "mediaContent/" + row.id });
    },

通过this.$router.push({})实现路由跳转。

详情页（MediaContent.vue）

mounted() {
    this.getArticle();
  },
  methods: {
    getArticle() {
      //获取当前页面接收到的id
      this.id = this.$route.params && this.$route.params.id;
      this.$http({
        method: "post",
        url: "/api/getArticle"
      })
        .then(response => {
          for (let i = 0; i < response.data.length; i++) {
            if (this.id === response.data[i].id) {
              this.$refs.testTable.innerHTML = response.data[i].mediaContent;
            }
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    }
  }
  }

表结构

详情页的id是从表中的id获取到的，通过getArticle()方法从后台获取id

效果图

获取到的详情页id效果如下：

参考博客