Vue下动态修改title标题

安装 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

黄良钵

博客站长,前端开发工程师

发表评论

电子邮件地址不会被公开。 必填项已用*标注

微信扫一扫

微信扫一扫

微信扫一扫,分享到朋友圈

Vue下动态修改title标题
返回顶部
网站稳定运行 : {{ diffYears }}年 零 {{ diffDays }}天 {{ diffHours }} 小时 {{ diffMinutes }} 分钟 {{ diffSeconds }} 秒

显示

忘记密码?

显示

显示

获取验证码

Close