把el-dialog封装成路由，点击按钮关闭路由

将 `el-dialog` 封装成路由的话，需要先在路由配置中定义该路由，并将 `el-dialog` 组件作为路由的组件。然后在需要打开该对话框的页面中，通过 `router-link` 或者 `$router.push` 方法打开该路由。最后在该路由组件中，可以通过 `$router.back()` 方法来关闭路由并返回到上一页。

以下是一个示例代码：

在路由配置中定义该路由：

// router.js

import Dialog from "@/components/Dialog.vue";
import Vue from "vue";
import VueRouter from "vue-router";

Vue.use(VueRouter);

const routes = [
  {
    path: "/dialog",
    component: Dialog
  }
];

const router = new VueRouter({
  routes
});

export default router;

在需要打开该对话框的页面中，通过 `router-link` 或者 `$router.push` 方法打开该路由：

<!-- App.vue -->

<template>
  <div>
    <el-button @click="$router.push('/dialog')">打开对话框</el-button>
  </div>
</template>

在该路由组件中，可以通过 `$router.back()` 方法来关闭路由并返回到上一页：

<!-- Dialog.vue -->

<template>
  <div>
    <el-dialog :visible.sync="dialogVisible" title="对话框标题">
      <p>对话框内容</p>
      <div slot="footer">
        <el-button @click="$router.back()">关闭对话框</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: true
    };
  }
};
</script>

在上面的示例代码中，我们将 `Dialog.vue` 组件作为路由的组件，并在需要打开该对话框的页面中通过 `$router.push` 方法打开该路由。在 `Dialog.vue` 组件中，我们使用 `visible.sync` 来控制对话框的显示和隐藏，同时在对话框底部添加一个按钮，通过 `$router.back()` 方法来关闭路由并返回到上一页。