解决Vue单页面应用在微信等APP里面无法设置title问题

热门标签

, ,

XyPlayer 智能解析

一次购买包永久免费更新

无需安装无需数据库上传即用

全部开关,无需任何代码修改

强大的后台,支持修改各项配置

¥9.9 现在购买

特别声明:文章多为网络转载,资源使用一般不提供任何帮助,特殊资源除外,如有侵权请联系!

作用

Vuejs 单页应用在 iOS 系统下部分 APP 的 webview 中 标题不能通过 document.title = xxx 的方式修改 该插件只为解决该问题而生(兼容安卓)

安装

Vuejs 2.x

npm install vue-titles --save
ES6

main.js

Vue.use(require('vue-titles'));

使用场景 1 :单页面应用切换路由跳转更新 title

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

// ...
const routes = [
  {
    name: 'Home',
    path: '/home',
    meta: {
      title: '首页'
    },
    component: require('../views/Home.vue')
  },
  {
    name: 'UCenter',
    path: '/ucenter',
    meta: {
      title: '用户中心'
    },
    component: require('../views/UCenter.vue')
  }
];
// ...

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

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

使用场景 2:同一个路由不同状态需要手动设置 title

// 需要的地方直接调用
this.$setTitle('厉害了我的哥!');

未经允许不得转载:作者:Promise, 转载或复制请以 超链接形式 并注明出处 蚂蚁号
原文地址:《解决Vue单页面应用在微信等APP里面无法设置title问题》 发布于2019-07-26

分享到:
赞(0) 打赏

评论 抢沙发

2 + 8 =


解决Vue单页面应用在微信等APP里面无法设置title问题

长按图片转发给朋友

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

热门影院
专业打造轻量级个人企业风格博客主题!专注于前端开发,全站响应式布局自适应模板。
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册