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] },
      },
      { // 需要跳转的页面
        path: 'works',
        component: () => import('@/views/exhibition/works'),
        name: 'works',
        meta: { title: '详情页', icon: 'theme', roles: [1, 2], noCache: true },
        hidden: true // 是否显示在菜单
      }
    ]
}

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="handleWork(scope.row)">
            查看详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
	export default {
		methods: {
			handleWork(row) {
				this.$router.push({
					name: 'works',
					query: {
						id: row.id
					}
				})
			},
		}
	}
</script>

需要注意的是，$router中name需要和路由里的name一样。也可以直接使用path指定。

3、详情页中展示自己的页面逻辑，exhibition/works.vue

<script>
    created() {
        // 获取列表页传递过来的参数：this.$route.query.id
    },
</script>

ps：通过弹窗形式进入详情，参考《vue-element-admin 页面内点击进入详情(弹窗形式)》