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

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

业务需求：

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

解决方案：

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

<template><div :class="classObj" class="app-wrapper"><divv-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-popoverv-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"><divv-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不是专业前端，如果有更好的方法欢迎在评论区指正，互相学习！

如果觉得《【前端】Vue实现操作A页面时 刷新B页面的数据(局部刷新)》对你有帮助，请点赞、收藏，并留下你的观点哦！