Vue设置每个页面的title

最近有个同事用vue.js在开发微信的项目，问我如何设置网页的title。

于是乎 把这个方法整理成博客，希望帮助更多的人吧

 

第一步：用npm安装  vue-wechat-title

npm install vue-wechat-title --save

第二部：在vue里面的 main.js里是引入这个插件，具体操作看代码

// 加设置title插件
import VueWechatTitle from 'vue-wechat-title';
Vue.use(VueWechatTitle)

第三步： 在App.vue 这个组件里使用，具体操作看代码

<template>

  <div id="app" v-cloak>

    <router-view v-wechat-title="$route.meta.title"></router-view>

  </div>

</template>

<script>

第四步：在路由文件(route.js)里设置每个页面的title以及description，代码参考如下

const VIDEO_ROUTER = [
  {
    path: '/',
    component: index,
    meta:{
      title: '小六博客首页',
    }
  },
  {
    path: '/login',
    component: Login,
    meta:{
      title: '登录中心',
    }
  }

........
........
........

这样就已经大功告成了！是不是很简单呢？对没错 就是这么简单

注：有问题，可在下方留言。大家一起交流学习