Vue项目中如何在utils文件夹下的js文件中实现路由跳转和弹窗功能？

// src/router/index.js
import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const routes = [
  // ...你的路由配置...
  {
    path: '/somewhere',
    component: () => import('@/components/somewhere.vue')
  }
];

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
});

export default router;

// src/utils/routerUtils.js
import router from '@/router';

export function goToSomewhere() {
  router.push('/somewhere');
}

// src/utils/dialogUtils.js
import Vue from 'vue';

export default function useDialog(component, props = {}) {
  return new Promise((resolve, reject) => {
    const DialogComponent = Vue.extend(component);
    const instance = new DialogComponent({
      propsData: props
    }).$mount();
    document.body.appendChild(instance.$el);
    instance.visible = true;
    instance.$on('close', () => {
      document.body.removeChild(instance.$el);
      resolve(instance.result); // 传递弹窗结果
    });
  });
}

// 组件中使用
import AddGroupDialog from './AddGroupDialog.vue';
import useDialog from '@/utils/dialogUtils';

async function handleAdd() {
  const result = await useDialog(AddGroupDialog, { someProp: 'value' });
  if (result) {
    // 处理弹窗返回结果
  }
}

<template>
  <el-dialog :visible.sync="visible" @close="handleClose">
    <p>这是一个弹窗</p>
    <el-button @click="submit">确定</el-button>
    <el-button @click="cancel">取消</el-button>
  </el-dialog>
</template>

<script>
import { goToSomewhere } from '@/utils/routerUtils'; // 导入路由跳转函数

export default {
  props: {
    someProp: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      visible: true,
      result: null
    };
  },
  methods: {
    submit() {
      goToSomewhere(); // 在弹窗中进行路由跳转
      this.result = true; // 设置返回结果
      this.handleClose();
    },
    cancel() {
      this.result = false;
      this.handleClose();
    },
    handleClose() {
      this.$emit('close');
    }
  }
};
</script>