内置的Vue文件被iframe引用如何跳外部链接？

• 在某些老的大型项目中新增的功能板块可能会使用vue开发
• 开发过程中可能会遇到跳转到vue项目外部的地址我们该如何处理?
• 如果vue页面是嵌套在iframe中此时用正常的方式跳转会出现套娃现象或报错
• 解决方式如下

一：在utils创建JumpOutside.js文件并封装方法

// 需要跳转几个地址写几个方法
// 可以接收参数
export function jumpHome() {
   // 跳转的地址
   return top.location.href = 'http://localhost:7890/Home';
}

export function jumpLogin() {
   // 跳转的地址
   return top.location.href = 'http://localhost:7890/Login';
}

二：在vue页面调用封装的方法

<template>
    <div>
      <el-button @click="jump">跳转外部地址</el-button>
    </div>
</template>
<script>
// 引入封装好的文件
import { jumpHome } from '@/utils/JumpOutside';

export default {
  name: 'home-vue',
  methods: {
    jump(){
      // 在此处调用封装好的方法
      jumpHome()
    }
  }
}
</script>