• vue单页面应用中动态修改title


    https://www.jianshu.com/p/b980725b62e8

    https://www.npmjs.com/package/vue-wechat-title

    详细信息查看:vue-weachat-title
    解决问题:
    1、Vuejs 单页应用在iOS系统下部分APP的webview中 标题不能通过 document.title = xxx 的方式修改 该插件只为解决该问题而生(兼容安卓)
    2、在vue单页面中,通过浏览器分享到QQ、微信等应用中的链接,只有一个首页标题和默认icon图片

    已测试:APP 微信 QQ 支付宝 淘宝

    安装

    npm install vue-wechat-title --save
    


    作者:示十
    链接:https://www.jianshu.com/p/b980725b62e8
    来源:简书
    著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
     
     

    vue-wechat-title

    2.0.5 • Public • Published a year ago
     

    作用

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

    已测试APP

    • 微信
    • QQ
    • 支付宝
    • 淘宝

     

    效果 (请使用以上列表中任意一个APP扫码打开体验)

    不同版本使用方法类似 但是效果是一样的 demo是Vuejs1.x写的

    预览

    直接打开: http://vue-wechat-title.deboy.cn/

     

    安装

    Vuejs 1.x

    npm install vue-wechat-title@1.0.7 --save

    Vuejs 2.x

    npm install vue-wechat-title --save

     

    用法

    Vuejs 1.x demo

    Vuejs 2.x demo

     
    ES6

    main.js

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

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

    // ...
    const routes [
      {
        name'Home',
        path'/home',
        meta{
          title'首页'
        },
        componentrequire('../views/Home.vue')
      },
      {
        name'Order',
        path'/order',
        meta{
          title'订单'
        },
        componentrequire('../views/Order.vue')
      },
      {
        name'UCenter',
        path'/ucenter',
        meta{
          title'用户中心'
        },
        componentrequire('../views/UCenter.vue')
      }
    ]
    // ...

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

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

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

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

     

    欢迎提交PR

    install

     

    npm i vue-wechat-title

     

    weekly downloads

     

    772

    version

    2.0.5

    license

    MIT

    open issues

    2

    pull requests

    0

    homepage

    github.com

    repository

     

    last publish

    a year ago

    collaborators

    • avatar
     
     

    Help

  • 相关阅读:
    计网:传输层
    计网:网络层
    codeblocks 的安装与初体验
    二叉排序树的建立
    使用颜色空间进行图像分割
    密码学笔记
    Git笔记
    SVM笔记
    GAN笔记——理论与实现
    leetcode(三)
  • 原文地址:https://www.cnblogs.com/qqhfeng/p/11845544.html
Copyright © 2020-2023  润新知