初始vue界面引入另一个vue界面并且get接口获取参数

主vue引用界面 ：

<router-link to="/SelectViews" target="_blank">查看对方关卡数据</router-link>

& 引入的外部vue界面

<template>
  <div style="width: 100%;height: 100%;padding: 10px">
    <a-table :columns="columns" :data-source="data" class="components-table-demo-nested" :row-key="record => record.sort">
      <p slot="expandedRowRender" slot-scope="record" style="margin: 0">
        <a-table style="background-color: #FFFFFF" :columns="innerColumns" :data-source="record.gameBases"
                 :pagination="false" :row-key="gameBases => gameBases.gameSort">
          <a>Pause</a>
          <a>Stop</a>
        </a-table>
      </p>
    </a-table>
  </div>
</template>

<script>
const columns = [
  {title: '关卡', dataIndex: 'name', key: 'name'},
  {title: '答题人', dataIndex: 'founder', key: 'founder'},
];
const data = [];
const innerColumns = [
  {title: '游戏关卡', dataIndex: 'gameTitle', key: 'gameTitle'},
  {title: '平均花费时间', dataIndex: 'time', key: 'time'},
  {title: '通关次数', dataIndex: 'number', key: 'number'},
];

export default {
  name: "SelectViews",
  data() {
    return {
      data,
      columns,
      innerColumns,
      gameBases:[],
    };
    },
  mounted (){
    this.getRelativeData();
  },
  methods:{
    async getRelativeData(){
      getRelatives({}).then(res => {
        this.data = res.data.data;
      })
    }
},
}
</script>
<style scoped>
</style>

接口传参：
引入vue界面：

//引入
import {getRelatives} from '@/api/home'
//钩子函数
mounted (){
    this.getRelativeData();
  },
  //实现
 methods:{
    async getRelativeData(){
      getRelatives({}).then(res => {
        this.data = res.data.data;
      })
    }
},

//home.js中 获取亲属关卡数据
export function getRelatives(params){
  return request({
    url:'/api/playerLogs/getRelatives',
    method:'get',
    params,
  })
}