直播app源码，弹窗形式实现页面内点击进入详情

1、添加路由，在router/index.js中添加详情页路由

<br>{<br>    path: '/exhibition',<br>    component: Layout,<br>    meta: { title: '展览管理', icon: 'theme', roles: [1, 2] },<br>    children: [<br>      {<br>        path: 'index',<br>        component: () => import('@/views/exhibition/index'),<br>        name: 'exhibition',<br>        meta: { title: '列表页', icon: 'theme', roles: [1, 2] },<br>      }<br>    ]<br>}

2、列表页中添加点击事件，exhibition/index.vue

<br><template><br>  <div class="app-container"><br>    <el-table :data="list" style="width: 100%"><br>      <el-table-column label="操作" min-width="100"><br>        <template slot-scope="scope"><br>          <el-button type="primary" size="mini" @click="handleUpdate(scope.row)"><br>            编辑<br>          </el-button><br>        </template><br>      </el-table-column><br>    </el-table><br>    <el-drawer :title="dialogStatus" :visible.sync="dialogFormVisible" :close-on-press-escape="false" :wrapper-closable="false" size="80%"><br>      <addExh ref="addExh" @on-close="dialogFormVisible=false" /><br>    </el-drawer><br>  </div><br></template><br><script><br>    import addExh from './add.vue'<br>export default {<br>        components: {addExh},<br>methods: {<br>handleUpdate(row) {<br>                this.dialogStatus = '展览编辑'<br>                this.dialogFormVisible = true<br>                this.$nextTick(() => {<br>                      this.$refs.addExh.resetTemp(row.id)<br>                })<br>            },<br>}<br>}<br></script>

3、编辑页中添加编辑逻辑，exhibition/add.vue

<br><template><br>  <div class="app-container"><br>    编辑页相关页面逻辑<br>  </div><br></template><br><script><br>    import addExh from './add.vue'<br>export default {<br>        components: {addExh},<br>methods: {<br>            resetTemp(id) {<br>              // id：列表页中传递过来的参数<br>            },<br>}<br>}<br></script>

以上就是直播app源码，弹窗形式实现页面内点击进入详情，更多内容欢迎关注之后的文章