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

在 main.js 中动态设置标题

  1. 需求:不同的网址浏览器页签名称要不同

  2. 实现方法:在 main.js 中动态设置标题

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

使用 document.addEventListener('DOMContentLoaded', ...) 确保 DOM 完全加载后再设置标题。

根据 window.location.pathname 判断当前语言,并设置相应的标题。

main.js完整代码如下:

javascript 复制代码
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)
});
相关推荐
r0ad3 分钟前
从痛点到解决方案:为什么我开发了Chrome元素截图插件
前端·chrome
OEC小胖胖10 分钟前
连接世界:网络请求 `wx.request`
前端·微信小程序·小程序·微信开放平台
jingling55523 分钟前
解决微信小程序真机调试中访问本地接口 localhost:8080 报错
前端·微信小程序·小程序
en-route24 分钟前
使用 Flask 构建 Web 应用:静态页面与动态 API 访问
前端·python·flask
IT_陈寒26 分钟前
Vite 5年迭代揭秘:3个核心优化让你的项目构建速度提升200%
前端·人工智能·后端
怎么吃不饱捏41 分钟前
vue3+vite,引入阿里巴巴svg图标,自定义大小颜色
前端·javascript·vue.js
无敌最俊朗@43 分钟前
MQTT 关键特性详解
java·前端·物联网
JAVA学习通43 分钟前
微服务项目->在线oj系统(Java-Spring)----[前端]
java·开发语言·前端
excel1 小时前
Vue3 响应式系统核心执行器:Reactive Effect 与依赖调度机制
前端
南玖i3 小时前
vue3 通过 Vue3DraggableResizable实现拖拽弹窗,可修改大小
前端·javascript·vue.js