Vue下动态修改title标题

转载 deboyblog  2018-04-16 14:24  阅读 13 次 评论 0 条

安装 vue-wechat-title 插件,

  1. npm install vue-wechat-title --save

在main.js 中,

  1. Vue.use(require('vue-wechat-title'))

路由定义(只截取一部分):

  1. // ...
  2. const routes = [
  3.   {
  4.     name: 'Home',
  5.     path: '/home',
  6.     meta: {
  7.       title: '首页'
  8.     },
  9.     component: require('../views/Home.vue')
  10.   },
  11.   {
  12.     name: 'Order',
  13.     path: '/order',
  14.     meta: {
  15.       title: '订单'
  16.     },
  17.     component: require('../views/Order.vue')
  18.   },
  19.   {
  20.     name: 'UCenter',
  21.     path: '/ucenter',
  22.     meta: {
  23.       title: '用户中心'
  24.     },
  25.     component: require('../views/UCenter.vue')
  26.   }
  27. ]
  28. // ...

App.vue 建议全局只使用一次该指令 标题可用vuex或者router中定义 不要多处使用!!

  1. <!-- 任意元素中加 v-wechat-title 指令 建议将标题放在 route 对应meta对象的定义中 -->
  2. <div v-wechat-title="$route.meta.title"></div>
  3. <!--or-->
  4. <router-view v-wechat-title="$route.meta.title"></router-view>

自定义加载的图片地址 默认是 ./favicon.ico 可以是相对或者绝对的

  1. <div v-wechat-title="$route.meta.title" img-set="/static/logo.png"></div>

动态修改在组件中,设置:

  1. this.$route.meta.title = '标题名称'

项目:https://github.com/deboyblog/vue-wechat-title

关注我们:请关注一下我们的微信公众号:扫描二维码黄良钵博客的公众号,公众号:HLB_Blog
温馨提示:文章内容系作者个人观点,不代表黄良钵博客对观点赞同或支持。
版权声明:本文为转载文章,来源于 deboyblog ,版权归原作者所有,欢迎分享本文,转载请保留出处!
NEXT:已经是最新一篇了

发表评论


表情