javascript - 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

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

Answer 2

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

Answer 3

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