vue+element ui +axios点击列表页列表跳转指定id详情页并进行数据渲染（纯前端）

目录

一、思路

二、实现

一、思路

在列表页获取到所点击的list的id后，将这个id与路由绑定起来，进行跳转、渲染。

不过这个方法有个bug，就是当列表使用的不是<v-for>而是<el-table>时，跳转不起效。（跳转能绑定的模块在点击时，该列表还未获得数据，因此无法获取id）

二、实现

前端

由于<el-table>列表本身无法获取id，所以给每个列表绑定了一个<el-button>

列表页

        <el-table-column prop="todetails">
        <template slot-scope="scope">
          <el-button @click="todetails(scope.row.id)">查看</el-button>
        </template>
        </el-table-column>

这个todetails方法，就是对路由进行跳转的方法

列表页

 push(id){
        this.$router.replace({ name: 'Details', params: { id } })