如何在.js文件夹中增加路由跳转及弹窗？

Question

想在vue项目中的utils文件夹中的.js文件增加路由跳转及弹窗该如何加？

没有在.vue页面中，在.js文件中打印router是undefined

Answer 1

// @/route/index.js

const router = new VueRouter({
  mode: 'history',
  base: '/',
  routes: [
  {
  path: 'somewhere',
  component: somewhere,
  } 
],
})

export default router

import router from '@/route'

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

---

如果是想加弹窗的话可以写一个挂载方法，拿我正在用的举例：

import Vue from 'vue'

export const cache = new Set()

export default function useDialog(component) {
  const div = document.createElement('div')
  const el = document.createElement('div')

  const id = 'dialog-' + Math.random()

  div.appendChild(el)
  document.body.appendChild(div)

  const ComponentConstructor = Vue.extend(component)
  return (propsData = {}, parent = undefined) => {
    let instance = new ComponentConstructor({
      propsData,
      parent,
    }).$mount(el)

    const destroyDialog = () => {
      if (cache.has(id)) return
      if (instance && div.parentNode) {
        cache.add(id)
        instance.visible = false
        // 在关闭动画执行完毕后卸载组件
        setTimeout(() => {
          cache.delete(id)
          instance.$destroy()
          instance = null
          div.parentNode && div.parentNode.removeChild(div)
        }, 250)
      }
    }

    // visible控制
    if (instance.visible !== undefined) {
      // 支持sync/v-model
      instance.$watch('visible', (val) => {
        !val && destroyDialog()
      })
      Vue.nextTick(() => (instance.visible = true))
    }

    return new Promise((resolve, reject) => {
      // 组件内 emit done 事件表示确认
      instance.$once('done', (data) => {
        destroyDialog()
        resolve(data)
      })
      // 组件内 emit cancel 事件表示取消
      instance.$once('cancel', (data) => {
        destroyDialog()
        reject(data)
      })
    })
  }
}

使用用法：

import AddGroupDialog from './AddGroupDialog.vue'

function handleAdd() {
      useDialog(AddGroupDialog)({
// ...props
      }).then(() => {
// onDone
      })
    },

弹窗组件：

<template>
  <el-dialog
    :visible.sync="visible"
    width="920px"
    append-to-body>
      
    <template #footer>
      <el-button @click="close">取消</el-button>
      <el-button
        type="primary"
        @click="submit">
        确定
      </el-button>
    </template>
  </el-dialog>
</template>

<script>
import router from '@/router'

export default {
  name: 'AddGroupDialog',
  data() {
    return {
      visible: false,
    }
  },

  methods: {
    submit() {
      router.push('somewhere')
    },
    close() {
      this.visible = false
    },
  },
}
</script>

Answer 2

直接引入就可以用了

import router from "@/router";
export function getRouterInfo() {
  console.log(router);
}