Skip to content

动态设置浏览器头部标题

路由设置

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 }
      ]
    }
  }
}

程序员小洛文档