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: '登录中心',
    }
  }

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

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

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

猜你喜欢

转载自blog.csdn.net/qq_36204611/article/details/81203401
今日推荐