vue-meta插件管理头部标签

vue-meta 是基于Vue2.0 的vue-meta 插件，主要用于管理HTML头部标签，同时也支持SSR

vue-meta 有以下几个特点:

1.在组件内设置metainfo ,便可以轻松实现头部标签的管理。

2.metainfo 的数据都是响应的，如果数据变化，头部信息就会自动更新

3.支持SSR

1.安装

npm install vue-meta --save

2.引入

在main.js中引入

import VueMeta from 'vue-meta'
Vue.use(VueMeta)

然后就可以开始使用metaInfo了。在任何一个component中都可以定义 metaInfo 属性

3.使用

我们在App.vue中使用

<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>
export default  {
  name:  'App',
    metaInfo() {
    //设置浏览器标签页标题
        return {
         // 这里的 title 会替换 titleTemplate 中的字符占位
            title: this.$store.state.settings.dynamicTitle && this.$store.state.settings.title,
            // 这里定义titleTemplate会覆盖App.vue中的定义
            titleTemplate: title => {
                return title ? `${title} - ${process.env.VUE_APP_TITLE}` : process.env.VUE_APP_TITLE
            }
        }
    }
}
</script>

我们可以在路由卫士拦截器中，设置标题，设置到store中的 state的title中

router.beforeEach((to, from, next) => {
  NProgress.start();
  if (getToken()) {
    // 如果路由meta中有标题，则触发后面动作 设置store/setting/state.title,然后用在App.vue中
    to.meta.title && store.dispatch('settings/setTitle', to.meta.title);