Vue.js项目中管理每个页面的头部标签的方法


在 Vue SPA 应用中,如果想要修改 HTML 的头部标签,如页面的 title,我们只能去修改index.html模板文件,但是这个是全局的修改,如何为每个页面都设置不一样的 title 呢?下面介绍两种方法。

使用router.meta

在路由里面配置每个路由的地址:

routes: [
    { /* (首页)默认路由地址 */
        path: '/',
        name: 'Entrance',
        component: Entrance,
        meta: {
            title: '首页入口'
        }
    },
    { /* 修改昵称 */
        path: '/modifyName/:nickName',
        name: 'modifyName',
        component: modifyName,
        meta: {
            title: '修改昵称'
        }
    }
]

在每一个meta里面设置页面的title名字,最后在遍历

router.beforeEach((to, from, next) => {
    /* 路由发生变化修改页面title */
    if (to.meta.title) {
      document.title = to.meta.title
    }
    next();
});

这样就为每一个VUE 的页面添加了title。

使用vue-meta插件

vue-meta 主要用于管理 HMTL 头部标签,同时也支持 SSR。vue-meta有以下特点:

  • 在组件内设置 metaInfo,便可轻松实现头部标签的管理
  • metaInfo 的数据都是响应的,如果数据变化,头部信息会自动更新
  • 支持 SSR

在页面里面增加 metaInfo 选项

export default {
  data() {
    return {
      myTitle: '标题'
    }
  },
  metaInfo: {
    title: this.title,
    titleTemplate: '%s - by - vue-meta',
    htmlAttris: {
      lang: 'zh'
    },
    script: ''
  }
  ... ...
}

更多vue-meta使用请参考Github官网:https://github.com/declandewet/vue-meta


文章作者: 张张
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 张张 !
 上一篇
解读《东大教授教我的学习法》 解读《东大教授教我的学习法》
掌握了正确的学习方法,是一生的财富。不管你现在多大,只要获悉了学习的诀窍,你的人生就会有更多可能。
下一篇 
实战|Parcel构建一个基于Vue.js的相册应用 实战|Parcel构建一个基于Vue.js的相册应用
前段时间发了一篇《前端构建工具发展及其比较》,回顾了前端构建工具的发展历程和进化,其中最新出来的零配置打包工具Parcel我一直很好奇,它到底怎么零配置了?
2018-05-08
  目录