Appearance
动态设置浏览器头部标题
路由设置
js
router.afterEach((to) => {
if (to.meta.title) {
document.title = `${to.meta.title} · xx平台`;
} else {
document.title = 'xx平台';
}
});
router.afterEach((to) => {
if (to.meta.title) {
document.title = `${to.meta.title} · xx平台`;
} else {
document.title = 'xx平台';
}
});
预渲染
bash
# 使用prerender-spa-plugin
npm install prerender-spa-plugin --save-dev
# 使用prerender-spa-plugin
npm install prerender-spa-plugin --save-dev
js
// vue.config.js
const PrerenderSPAPlugin = require('prerender-spa-plugin');
const path = require('path');
module.exports = {
plugins: [
new PrerenderSPAPlugin({
staticDir: path.join(__dirname, 'dist'),
routes: ['/', '/about', '/contact'],
postProcess(renderedRoute) {
// 动态修改标题
renderedRoute.html = renderedRoute.html.replace(
/<title>[^<]*<\/title>/,
`<title>${renderedRoute.route} · xx平台</title>`
);
return renderedRoute;
}
})
]
};
// vue.config.js
const PrerenderSPAPlugin = require('prerender-spa-plugin');
const path = require('path');
module.exports = {
plugins: [
new PrerenderSPAPlugin({
staticDir: path.join(__dirname, 'dist'),
routes: ['/', '/about', '/contact'],
postProcess(renderedRoute) {
// 动态修改标题
renderedRoute.html = renderedRoute.html.replace(
/<title>[^<]*<\/title>/,
`<title>${renderedRoute.route} · xx平台</title>`
);
return renderedRoute;
}
})
]
};
服务端SSR
js
// Nuxt.js示例
export default {
head() {
return {
title: this.pageTitle || '默认标题',
meta: [
{ name: 'description', content: this.pageDescription }
]
}
}
}
// Nuxt.js示例
export default {
head() {
return {
title: this.pageTitle || '默认标题',
meta: [
{ name: 'description', content: this.pageDescription }
]
}
}
}