vueRouter页面刷新之后空白？

Question

路由配置

export default [
  {
    path: 'informationManage',
    component: () => import(/* webpackChunkName: "HbaseOverview" */ './index'),
    name: 'informationManage',
    meta: {
      group: 'informationManage',
      title: '信息管理',
      keepAlive: true,
      keepFlag: true,
      multiNodeKey: (cid) => `${cid}_table`
    },
    children: [
      {
        path: ':id/HbaseClusterDetails/:tableId/HbaseTableDrawerDetails',
        component: () => import(/* webpackChunkName: "HbaseTableDrawerDetails" */ './HbaseTableDrawerDetails.vue'),
        name: 'HbaseTableDrawerDetails'
      }
    ]
  }]

HbaseTableDrawerDetails页面：

<template>
  <el-drawer
    :visible.sync="showDialog"
    size="60%"
    direction="rtl"
    :append-to-body="appendToBody"
    :modal="false"
    :show-close="false"
    :destroy-on-close="true"
    :modal-append-to-body="appendToBody"
    :before-close="closeDialog"
    custom-class="execution-detail-drawer"
  >
    <HbaseTableDetailDrawerHeader slot="title" :tableDetails="tableDetails" @handleCloseDrawer="closeDialog" />
    <HbaseTableDetailDrawerTabs
      :tableDetails="tableDetails"
      :projectDetails="projectDetails"
      :computedEditAuth="computedEditAuth"
      :computedDeleteAuth="computedDeleteAuth"
      @refreshData="getTableDetail"
    ></HbaseTableDetailDrawerTabs>
  </el-drawer>
</template>

<script>
import { mapGetters } from 'vuex';
import api from '@/api';
import { personMixin } from '@/mixins';
import { getAccountValue } from '@/core/utils/format';
import HbaseTableDetailDrawerHeader from './HbaseTableDetailDrawerHeader';
import HbaseTableDetailDrawerTabs from './HbaseTableDetailDrawerTabs';

export default {
  name: 'HbaseTableDetailDrawer',
  components: {
    HbaseTableDetailDrawerHeader,
    HbaseTableDetailDrawerTabs,
  },
  props: {
    tableId: {
      type: [String, Number],
      default: '',
    },
    clusterId: {
      type: [String, Number],
      default: '',
    },
    appendToBody: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      showDialog: false,
      tableDetails: {},
      projectDetails: {},
      operatorAdminList: [],
    };
  },
  mounted() {
    console.log('1233444');
    this.showDialog = true;
    this.getTableDetail();
    this.getRoleList();
  },
  mixins: [personMixin],
  computed: {
    ...mapGetters({
      currentRoleType: 'currentRoleType',
      currentUserInfo: 'currentUserInfo',
    }),
    computedEditAuth() {
      const oaAccountId = this.currentUserInfo?.oaAccountId;
      const projectCreator = this.tableDetails.creatorName;
      return (
        (projectCreator && projectCreator.includes(oaAccountId)) ||
        this.projectDetails.oaAccountId === oaAccountId ||
        this.currentRoleType === 'operator_admin'
      );
    },
    computedDeleteAuth() {
      const oaAccountId = this.currentUserInfo?.oaAccountId;
      // 表负责人,项目负责人，平台负责人满足其中一项角色即可删除表权限
      const tableOwnerName = this.tableDetails?.adminName;
      const { projectOwners } = this.projectDetails;
      const reg = /(?<=\().*(?=\))/g;
      const operatorAdminAccountList = this.operatorAdminList.map((item) => item.userId);
      let formatTableId = '';
      if (reg.test(tableOwnerName)) {
        [formatTableId] = tableOwnerName.match(reg);
      }
      const tempList = [...operatorAdminAccountList, formatTableId, projectOwners];
      return tempList.includes(oaAccountId);
    },
  },
  methods: {
    async formatAccout(val) {
      const list = _.cloneDeep(val);
      const adminNameAccount = getAccountValue(list.adminName);
      list.adminShow = val.adminName;
      list.adminName = [adminNameAccount];
      const personIDs = _.union([adminNameAccount]);
      await this.$_personMixin_getIdsList(personIDs);
      this.$_personMixin_translate(list, 'adminName');
      return list;
    },
    getTableDetail() {
      api.hbase
        .getTableDetail(this.tableId)
        .then(async (res) => {
          if (api.hbase.result(res)) {
            this.tableDetails = await this.formatAccout(res.data.data);
            this.getProjectDetail();
          }
        })
        .catch(() => {});
    },
    getProjectDetail() {
      api.hbase.getProjectDetail(this.tableDetails.projectId).then((res) => {
        if (api.hbase.result(res)) {
          this.projectDetails = res.data.data;
        }
      });
    },
    getRoleList() {
      api.ops.getRoleList({ page: { currentPage: 1, pageSize: 100 } }).then((res) => {
        if (api.common.result(res)) {
          const { list } = res.data.data;
          this.operatorAdminList = list;
        }
      });
    },
    closeDialog() {
      this.showDialog = false;
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep {
  .el-drawer__body > * {
    height: 100%;
  }

  .el-drawer__header + .el-drawer__body {
    padding-left: 8px;
  }

  .el-tabs__item.is-active {
    background-color: #F4F5FA;
  }

  .el-drawer__header {
    border-bottom: 1px solid #F4F5FA;
  }

  .el-tabs--left {
    height: 100%;
  }

  .el-tabs--left .el-tabs__nav-wrap.is-left {
    margin-top: 15px;
  }

  .el-tabs__content {
    overflow: auto;
    height: 100%;
    background-color: #F4F5FA;
  }

  .drawer-container {
    margin: 12px;
  }
}
</style>

问题：
刷新之后，页面空白

Answer 1

是不是nginx的404？你截图看看，控制台。

Answer 2

一、父级path改成“/informationManage”，二、刷新空白可能是参数丢失，需要使用redirect:"跳转到/informationManage会执行这里，直接跳转设置的页面"，但是你的参数刷新可能导致参数丢失。建议使用router.push({name:"",query:{需要传递的参数}})这种方式进行传参，这样刷新不会丢失数据

Answer 3

https://router.vuejs.org/zh/guide/essentials/history-mode.htm...