vue-meta介绍

借用 vue-meta github 上的介绍，基于Vue 2.0 的 vue-meta 插件，主要用于管理HMTL头部标签，同时也支持SSR。

vue-meta有以下特点：

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

一、集成

npm install vue-meta --save

二、引入到main.js中

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

三、使用

App.vue:

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

<script>
  export default {
    name: 'App',
    metaInfo: {
      // if no subcomponents specify a metaInfo.title, this title will be used
      title: 'Default Title',
      // all titles will be injected into this template
      titleTemplate: '%s | My Awesome Webapp'
    }
  }
</script>

Home.vue(title="My Awesome Webapp")

<template>
  <div id="page">
    <h1>Home Page</h1>
  </div>
</template>

<script>
  export default {
    name: 'Home',
    metaInfo: {
      title: 'My Awesome Webapp',
      // override the parent template and just use the above title only
      titleTemplate: null
    }
  }
</script>

About.vue(title="About Us | My Awesome Webapp")

<template>
  <div id="page">
    <h1>About Page</h1>
  </div>
</template>

<script>
  export default {
    name: 'About',
    metaInfo: {
      // title will be injected into parent titleTemplate
      title: 'About Us'
    }
  }
</script>

NotFound.vue(title="404 | NotFound")

<template>
  <div id="page">
    <h1>About Page</h1>
  </div>
</template>

<script>
  export default {
    name: '404',
    metaInfo: {
      // title will be injected into parent titleTemplate
      title: '404'
      titleTemplate: '%s | NotFound'
    }
  }
</script>

附： github地址