el-dialog打开路由

如果你想通过 `el-dialog` 来打开一个路由页面，你可以按照以下步骤进行操作：

1. 首先，在你的组件中添加一个 `el-dialog` 组件，并设置一个变量来控制对话框的显示与隐藏。例如：

<template>
  <div>
    <el-button @click="openDialog">打开对话框</el-button>
    <el-dialog :visible.sync="dialogVisible" @close="closeDialog">
      <router-view></router-view>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false
    }
  },
  methods: {
    openDialog() {
      this.dialogVisible = true
    },
    closeDialog() {
      this.dialogVisible = false
    }
  }
}
</script>

在这个例子中，我们使用了 `el-button` 组件来触发 `openDialog` 方法，将 `dialogVisible` 设置为 `true`，从而打开对话框。对话框的内容使用了 `router-view` 组件来展示。

通过设置 `:visible.sync` 来实现对话框的显示与隐藏，并通过 `@close` 事件来监听对话框的关闭操作。

2. 接下来，在你的路由配置文件中，将需要展示在对话框中的路由组件配置为子路由。例如：

import Vue from 'vue'
import Router from 'vue-router'
import DialogComponent from '@/components/DialogComponent.vue'

Vue.use(Router)

const router = new Router({
  routes: [
    {
      path: '/',
      component: HomeComponent
    },
    {
      path: '/dialog',
      component: DialogComponent
    }
  ]
})

export default router

在这个例子中，我们将 `DialogComponent` 组件配置为 `/dialog` 路径的组件。

现在，当你点击 "打开对话框" 按钮时，对话框将会打开，并加载 `/dialog` 路由对应的组件。

希望这个解答对你有所帮助！如果还有其他问题，请随时提问。