【前端】Vue实现操作A页面时，刷新B页面的数据(局部刷新)

参考链接：VUE实现页面局部刷新

本功能是在此文章的启发下进行改进的

业务需求：

点击“详情”的时候刷新通知消息，但不能整个页面一起刷新，而消息通知和列表并不在一个页面上

解决方案：

1、在需要局部刷新的标签上加上【v-if="isRouterAlive"】，当然navbar 标签只是在此处引入【消息通知】的，其具体实现在其他页面，样式已省略

<template>
  <div :class="classObj" class="app-wrapper">
    <div
      v-if="device === 'mobile' && sidebar.opened"
      class="drawer-bg"
      @click="handleClickOutside"
    />
    <sidebar class="sidebar-container" />
    <div class="main-container">
      <div :class="{ 'fixed-header': fixedHeader }">
        <navbar v-if="isRouterAlive" />
      </div>
      <app-main v-if="isload" />
    </div>
  </div>
</template>

<script>
import { Navbar, Sidebar, AppMain } from "./components";
import ResizeMixin from "./mixin/ResizeHandler";
import { mapActions } from "vuex";

export default {
  name: "Layout",

  provide() {
    //提供
    return {
      reload: this.reload,
    };
  },

  components: {
    Navbar,
    Sidebar,
    AppMain,
  },
  mixins: [ResizeMixin],
  data() {
    return {
      isload: false,
      isRouterAlive: true,
    };
  },
  computed: {
    sidebar() {
      return this.$store.state.app.sidebar;
    },
    device() {
      return this.$store.state.app.device;
    },
    fixedHeader() {
      return this.$store.state.settings.fixedHeader;
    },
    classObj() {
      return {
        hideSidebar: !this.sidebar.opened,
        openSidebar: this.sidebar.opened,
        withoutAnimation: this.sidebar.withoutAnimation,
        mobile: this.device === "mobile",
      };
    },
  },
  created() {
    this.init();
  },
  methods: {
    ...mapActions("user", {
      _findRegion: "findRegion",
    }),
    async init() {
      try {
        await this._findRegion();
        this.isload = true;
      } catch (error) {
        this.$notify.success("资源初始化失败～");
      }
    },
    handleClickOutside() {
      this.$store.dispatch("app/closeSideBar", { withoutAnimation: false });
    },
    reload() {
      this.isRouterAlive = false;
      this.$nextTick(function () {
        this.isRouterAlive = true;
      });
    },
  },
};
</script>

2、InfoMessage.vue 该页面是具体的消息通知页面，样式和不必要内容已省略，只需要在methods同级的地方加上【inject: ["reload"]】即可，其余内容不需要管

<template>
  <div>
    <el-badge :value="count" :max="999" class="ssitem" v-if="this.count > 0">
      <el-popover
        v-if="count > 0"
        placement="bottom"
        width="400"
        trigger="click"
      >
        <div class="message">通知消息</div>
        <div v-for="(item, index) in gridData" :key="index" class="text item">
          <div
            v-if="item.number > 0"
            class="greater"
            @click.stop="handleLink(item.eventNumber)"
          >
            <div>{{ item.name }}</div>
            <div>
              <el-badge
                :value="item.number"
                :max="99"
                style="margin-top: 10px"
              />
            </div>
          </div>
        </div>
        <i slot="reference" class="el-icon-bell bell" />
      </el-popover>
   
    </el-badge>
    <div v-else>
      <i slot="reference" class="el-icon-bell icon_message_class" />
    </div>
  </div>
</template>

<script>
import { BASE_API } from "@/config";
import { mapGetters } from "vuex";
import { getInfoMation } from "@/api/home.js";
export default {
  name: "",
  data() {
    return {
    };
  },
  computed: {
  },
  created() {
  },
  inject: ["reload"], //用于刷新消息通知
  methods: {
  },
};
</script>

3、在需要触发消息通知的页面（我这边就是第一张图的列表页）引入通知组件，并隐藏

4、点击【详情】的时候调用触发子页面的reload()方法，到此就完成了只刷新消息，而不会整改页面刷新

up不是专业前端，如果有更好的方法欢迎在评论区指正，互相学习！