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

Vue 动态设置当前页面标题和图标

news 来源：原创 2025/6/13 7:32:10

1. 页面标题设置

基础用法

// 在Vue组件中直接设置
document.title = "新的页面标题";

Vue3 Composition API 生命周期设置

import { onMounted } from 'vue';export default {setup() {onMounted(() => {document.title = "我的应用";});}
}

响应式数据驱动标题

import { ref, watch, onMounted } from 'vue';export default {setup() {const appName = ref('');// 监听数据变化自动更新标题watch(() => appName.value, (newName) => {document.title = newName || "默认标题";});return { appName };}
}

2. 网站图标（Favicon）设置

推荐方法：简单实用

// 设置favicon的工具函数
function setFavicon(iconUrl) {let link = document.querySelector("link[rel~='icon']");if (!link) {link = document.createElement('link');link.rel = 'icon';document.head.appendChild(link);}link.href = iconUrl;
}

完整版本（兼容性更好）

function setCompleteFavicon(iconUrl) {// 清除现有图标document.querySelectorAll("link[rel*='icon']").forEach(el => el.remove());// 标准faviconconst favicon = document.createElement('link');favicon.rel = 'icon';favicon.href = iconUrl;document.head.appendChild(favicon);// 兼容旧浏览器const shortcutIcon = document.createElement('link');shortcutIcon.rel = 'shortcut icon';shortcutIcon.href = iconUrl;document.head.appendChild(shortcutIcon);
}

3. Vue项目完整示例

基础示例

<template><div><h1>{{ appInfo.name }}</h1><img :src="appInfo.logo" alt="Logo"></div>
</template><script setup>
import { ref, onMounted, watch } from 'vue';const appInfo = ref({name: '',logo: ''
});// 设置favicon工具函数
function setFavicon(iconUrl) {let link = document.querySelector("link[rel~='icon']");if (!link) {link = document.createElement('link');link.rel = 'icon';document.head.appendChild(link);}link.href = iconUrl;
}// 获取应用信息
async function getAppInfo() {try {// 模拟API调用const response = await fetch('/api/app-info');const data = await response.json();appInfo.value = data;// 设置页面标题和图标document.title = data.name || '默认应用';if (data.logo) {setFavicon(data.logo);}} catch (error) {console.error('获取应用信息失败:', error);document.title = '应用加载失败';}
}// 组件挂载时执行
onMounted(() => {getAppInfo();
});// 监听数据变化，实时更新
watch(() => appInfo.value.name, (newName) => {if (newName) {document.title = newName;}
});watch(() => appInfo.value.logo, (newLogo) => {if (newLogo) {setFavicon(newLogo);}
});
</script>

实际项目中的使用（基于你的代码）

<script setup>
import { ref, onMounted } from 'vue';const appInfo = ref({name: '',appLogo: '',// ... 其他属性
});// 设置favicon
function setFavicon(iconUrl) {let link = document.querySelector("link[rel~='icon']");if (!link) {link = document.createElement('link');link.rel = 'icon';document.head.appendChild(link);}link.href = iconUrl;
}// 获取app信息
function getApp() {JBoltApi.tryGet(`/aiApp/getBySn/${appSn}`).then((res) => {appInfo.value = res.data;appId.value = appInfo.value.id;const uiConfig = res.data.config?.uiConfig;if (uiConfig) {// 设置应用图标if (uiConfig.appLogo != undefined && uiConfig.appLogo != '') {appInfo.value.appLogo = uiConfig.appLogo;} else {appInfo.value.appLogo = 'https://static.jbolt.cn/website/jboltai_logo_icon.png';}} else {appInfo.value.appLogo = 'https://static.jbolt.cn/website/jboltai_logo_icon.png';}// 设置页面标题和图标 ⭐⭐⭐ 关键代码document.title = appInfo.value.name;setFavicon(appInfo.value.appLogo);checkAppAccessable(appInfo.value);});
}onMounted(() => {getApp();
});
</script>

4. 常见问题解决

问题1：图标缓存不更新

// 解决方案：添加时间戳
function setFaviconWithCache(iconUrl) {const timestamp = new Date().getTime();const urlWithTimestamp = `${iconUrl}?t=${timestamp}`;setFavicon(urlWithTimestamp);
}

问题2：组件切换时重置

<script setup>
import { onActivated, onDeactivated } from 'vue';// 保存原始标题和图标
const originalTitle = ref(document.title);
const originalIcon = ref('');onActivated(() => {// 组件激活时设置document.title = "我的应用";setFavicon("https://example.com/icon.png");
});onDeactivated(() => {// 组件失活时可选择恢复// document.title = originalTitle.value;
});
</script>

问题3：错误处理

function safeSetFavicon(iconUrl) {try {if (!iconUrl || typeof iconUrl !== 'string') {console.warn('无效的图标URL:', iconUrl);return false;}let link = document.querySelector("link[rel~='icon']");if (!link) {link = document.createElement('link');link.rel = 'icon';document.head.appendChild(link);}link.href = iconUrl;return true;} catch (error) {console.error('设置favicon失败:', error);return false;}
}

5. 实用工具函数封装

页面元数据管理类

<script setup>
// 页面元数据管理工具
class PageMeta {static setTitle(title) {if (title) {document.title = title;}}static setFavicon(iconUrl) {if (!iconUrl) return false;let link = document.querySelector("link[rel~='icon']");if (!link) {link = document.createElement('link');link.rel = 'icon';document.head.appendChild(link);}link.href = iconUrl;return true;}static setMeta(title, iconUrl) {this.setTitle(title);this.setFavicon(iconUrl);}
}// 在组件中使用
const updatePageMeta = (appData) => {PageMeta.setMeta(appData.name, appData.logo);
};
</script>

Composable 函数方式

// composables/usePageMeta.js
import { ref } from 'vue';export function usePageMeta() {const currentTitle = ref(document.title);const setTitle = (title) => {if (title) {document.title = title;currentTitle.value = title;}};const setFavicon = (iconUrl) => {if (!iconUrl) return;let link = document.querySelector("link[rel~='icon']");if (!link) {link = document.createElement('link');link.rel = 'icon';document.head.appendChild(link);}link.href = iconUrl;};const setMeta = (title, iconUrl) => {setTitle(title);setFavicon(iconUrl);};return {currentTitle,setTitle,setFavicon,setMeta};
}

在组件中使用 Composable

<script setup>
import { usePageMeta } from '@/composables/usePageMeta';const { setTitle, setFavicon, setMeta } = usePageMeta();const appInfo = ref({});const loadApp = async () => {const data = await getAppData();appInfo.value = data;// 使用composable设置setMeta(data.name, data.logo);
};
</script>

6. 快速参考

最常用的代码片段

// 1. 设置标题
document.title = "页面标题";// 2. 设置图标（推荐方法）
function setFavicon(iconUrl) {let link = document.querySelector("link[rel~='icon']");if (!link) {link = document.createElement('link');link.rel = 'icon';document.head.appendChild(link);}link.href = iconUrl;
}// 3. 在Vue组件中使用
onMounted(() => {document.title = appInfo.value.name;setFavicon(appInfo.value.logo);
});