mirror of
https://github.com/pure-admin/vue-pure-admin.git
synced 2025-06-09 09:57:19 +08:00
58 lines
1.9 KiB
JavaScript
58 lines
1.9 KiB
JavaScript
import { watchEffect } from 'vue';
|
|
export function useUpdateHead(route, siteDataByRouteRef) {
|
|
const metaTags = Array.from(document.querySelectorAll('meta'));
|
|
let isFirstUpdate = true;
|
|
const updateHeadTags = (newTags) => {
|
|
if (process.env.NODE_ENV === 'production' && isFirstUpdate) {
|
|
// in production, the initial meta tags are already pre-rendered so we
|
|
// skip the first update.
|
|
isFirstUpdate = false;
|
|
return;
|
|
}
|
|
metaTags.forEach((el) => document.head.removeChild(el));
|
|
metaTags.length = 0;
|
|
if (newTags && newTags.length) {
|
|
newTags.forEach((headConfig) => {
|
|
const el = createHeadElement(headConfig);
|
|
document.head.appendChild(el);
|
|
metaTags.push(el);
|
|
});
|
|
}
|
|
};
|
|
watchEffect(() => {
|
|
const pageData = route.data;
|
|
const siteData = siteDataByRouteRef.value;
|
|
const pageTitle = pageData && pageData.title;
|
|
document.title = (pageTitle ? pageTitle + ` | ` : ``) + siteData.title;
|
|
updateHeadTags([
|
|
['meta', { charset: 'utf-8' }],
|
|
[
|
|
'meta',
|
|
{
|
|
name: 'viewport',
|
|
content: 'width=device-width,initial-scale=1'
|
|
}
|
|
],
|
|
[
|
|
'meta',
|
|
{
|
|
name: 'description',
|
|
content: siteData.description
|
|
}
|
|
],
|
|
...siteData.head,
|
|
...((pageData && pageData.frontmatter.head) || [])
|
|
]);
|
|
});
|
|
}
|
|
function createHeadElement([tag, attrs, innerHTML]) {
|
|
const el = document.createElement(tag);
|
|
for (const key in attrs) {
|
|
el.setAttribute(key, attrs[key]);
|
|
}
|
|
if (innerHTML) {
|
|
el.innerHTML = innerHTML;
|
|
}
|
|
return el;
|
|
}
|