前端标签页管理

指定标签页名称

跳转函数中指定路由参数 tagsViewName 可以自定义标签页显示的名称。

const router = useRouter();
router.push({ path: '/xxx', query: { tagsViewName: '标签名称' } });

刷新当前页面

通过事件总线触发页面刷新操作。

import { useRoute } from "vue-router";
import mittBus from "/@/utils/mitt";

const route = useRoute();

// 刷新当前页面
const refreshPage = () => {
  mittBus.emit("onCurrentContextmenuClick", {
    contextMenuClickId: 0,
    ...route
  });
};

关闭当前页面

通过事件总线触发关闭当前标签页操作。

// 关闭当前页面
const closePage = () => {
  mittBus.emit("onCurrentContextmenuClick", {
    contextMenuClickId: 1,
    ...route
  });
};

关闭其它页面

关闭除当前页面外的其它所有标签页。

// 关闭除当前页外的其它页面
const closeOthers = () => {
  mittBus.emit("onCurrentContextmenuClick", {
    contextMenuClickId: 2,
    ...route
  });
};

关闭全部页面

关闭所有已打开的标签页。

// 关闭所有页面
const closeAll = () => {
  mittBus.emit("onCurrentContextmenuClick", {
    contextMenuClickId: 3,
    ...route
  });
};

全屏显示

将当前页面设置为全屏显示模式。

// 当前页面全屏显示
const fullscreen = () => {
  mittBus.emit("onCurrentContextmenuClick", {
    contextMenuClickId: 4,
    ...route
  });
};

操作ID说明

事件总线操作

通过 contextMenuClickId 参数控制不同的标签页操作。

操作ID功能说明
0刷新当前页面
1关闭当前页面
2关闭其它页面
3关闭全部页面
4当前页全屏显示