弹窗内打开指定路由页面

在弹窗（Modal）内打开指定的路由页面，通常涉及到Vue组件内的导航。你可以通过在Modal的回调函数中使用Vue Router进行导航操作。下面是一个简单的示例：

首先，确保已经安装了Vue Router库，如果没有安装，可以运行 `npm install vue-router`。

1. 定义一个可复用的Modal组件，包含导航到特定路由的功能：

<template>
  <el-dialog title="自定义标题" :visible.sync="dialogVisible" width="80%">
    <div slot="footer">
      <el-button @click="closeDialog">关闭</el-button>
      <el-button @click="navigateToRoute">打开新页</el-button>
    </div>
    <router-view></router-view> <!-- 用于动态加载路由内容 -->
  </el-dialog>
</template>

<script>
export default {
  name: "CustomModal",
  data() {
    return {
      dialogVisible: false, // 控制Modal是否显示
    };
  },
  methods: {
    navigateToRoute() {
      // 清晰地定义你要去的路由名或路径
      const routeNameOrPath = '/your-route'; // 或者 'your-component-name'
      this.$router.push(routeNameOrPath);
      this.dialogVisible = false; // 关闭弹窗
    },
    closeDialog() {
      this.dialogVisible = false;
    }
  },
};
</script>

2. 在父组件中使用这个Modal组件，并控制其显示：

<template>
  <button @click="showModal">打开Modal</button>
  <CustomModal ref="customModal"></CustomModal>
</template>

<script>
import CustomModal from "./CustomModal.vue";

export default {
  components: {
    CustomModal,
  },
  methods: {
    showModal() {
      this.$refs.customModal.dialogVisible = true; // 显示Modal
    },
  },
};
</script>

当你点击“打开新页”按钮时，Modal会导航到指定的路由。