当前位置：首页 > news >正文

Vue动态修改页面的 title 浏览器页签名称

news 来源：原创 2025/5/24 0:05:26

在 main.js 中动态设置标题

需求：不同的网址浏览器页签名称要不同
实现方法：在 main.js 中动态设置标题

// 动态设置页面标题
document.addEventListener('DOMContentLoaded', () => {
  const title = window.location.pathname.includes("/en/") ? 'Support System' : '支持系统';
  document.title = title;
});

使用 document.addEventListener('DOMContentLoaded', ...) 确保 DOM 完全加载后再设置标题。
根据 window.location.pathname 判断当前语言，并设置相应的标题。

main.js完整代码如下：

import Vue from "vue";

import App from "./App.vue";
import store from "./store";
import router from "./router";
import "virtual:svg-icons-register";

import directive from "./directive"; //directive
Vue.use(directive);

//VueMeta
import VueMeta from "vue-meta";
Vue.use(VueMeta);

//Cookie
import Cookies from "js-cookie";

import "@/style.css";
import "animate.css";

import "@support/assets/styles/index.scss"; // global css
import "@support/assets/styles/ruoyi.scss"; // ruoyi css

import "./permission";
import "@/echarts";

// VXETable
import VXETable from "vxe-table";
Vue.use(VXETable);
import VXETablePluginExportXLSX from "vxe-table-plugin-export-xlsx";
VXETable.use(VXETablePluginExportXLSX);
import "vxe-table/lib/style.css";
import "xe-utils";

import Draggable from "vuedraggable";
Vue.component("Draggable", Draggable);

import VueContextMenu from "vue-contextmenu";
Vue.use(VueContextMenu);

import Element from "element-ui";
import VueI18n from "vue-i18n";
import en from "element-ui/lib/locale/lang/en";
import zhCN from "element-ui/lib/locale/lang/zh-CN";
import "@support/assets/styles/element-variables.scss";
Element.Dialog.props.closeOnClickModal.default = false;
Element.Dialog.props.appendToBody.default = true;
Element.TableColumn.props.showOverflowTooltip = {
	type: Boolean,
	default: true
};
Vue.use(VueI18n)
const i18n = new VueI18n({
	locale: window.location.pathname.includes("/en/") ? en : zhCN,
	// locale: en,

	messages: {
		en: { ...en },
		zhCN: { ...zhCN }
	}
});

Element.locale(i18n.locale)

Vue.use(Element, {
	size: Cookies.get("size") || "medium" ,// set element-ui default size
	// i18n: (key, value) => i18n.t(key, value)
});

import { NofeelUI } from "nofeel-ui";
Vue.use(NofeelUI);

Vue.config.productionTip = false;

import "./prototype.js";

import "@support/utils/observe";

// 动态设置页面标题
document.addEventListener("DOMContentLoaded", () => {
	const title = window.location.pathname.includes("/en/") ? "Support System" : "支持系统";
	document.title = title;
})

export default new Vue({
	el: "#app",
	router,
	store,
	// i18n,
	render: (h) => h(App)
});