vue-element-admin 页面内点击进入详情(弹窗形式)

现在有一个需求是点击页面内的详情按钮后进行跳转到详情页，左侧导航栏不可点击，以弹窗的形式展示。具体步骤如下：

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

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

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

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

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

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

ps：通过路由方式进入详情，请参考《页面内点击进入详情(路由形式)》