Vue动态改变title的标题及图标

2023-10-26

1.首先安装 vue-wechat-title包

npm install vue-wechat-title --save

2.引入包,设置每个页面的标题
在mian.js中引入 作为全局使用

import VueWechatTitle from "vue-wechat-title";
Vue.use(VueWechatTitle);

3 . 使用
在app.vue中的router-view中写入

<div id="app">
        <router-view v-wechat-title="$route.meta.title" />
</div>

或者

<div v-wechat-title="$route.meta.title"></div>

4 .在路由文件 index.js 中给需要的路由添加 title

routes: [{
      path: '/',
      name: 'JmCon',
      component: JmCon,
      meta:{
        keepAlive: true
      }
    },    {
      path: '/detail',
      name: 'TopicDetail',
      component: TopicDetail,
      meta:{
        title: '首页',
        keepAlive: false
      }
    }
  ]

5 .动态得改变title值

<div v-wechat-title="$route.meta.title={data.title}"></div>

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

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

二: 加载固定的图标
第一种方法:在这里插入图片描述
找到这两个文件:
在这里插入图片描述
2 .第二种
下面黄色是title前面默认的小图标,红色是默认的title
在这里插入图片描述

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Vue动态改变title的标题及图标 的相关文章

随机推荐

  • C++中虚函数、虚指针和虚表详解

    关于虚函数的背景知识 用virtual关键字申明的函数叫做虚函数 虚函数肯定是类的成员函数 存在虚函数的类都有一个一维的虚函数表叫做虚表 每一个类的对象都有一个指向虚表开始的虚指针 虚表是和类对应的 虚表指针是和对象对应的 多态性是一个接口
  • Windows CMD 输出文本到文件,不加换行符

    gt test txt set p Hello
  • 共筑安全创新生态,持安科技加入麒麟软件安全生态联盟

    近日 麒麟软件安全生态联盟第二季度工作会议成功举行 零信任办公安全领域明星企业持安科技受邀参会 并参与授牌环节成为麒麟软件安全生态联盟会员单位 麒麟软件安全生态联盟授牌仪式 会上 联盟成员单位围绕操作系统安全事件与漏洞发展趋势 行业应用对操
  • Beego v2.0 编译后无法运行问题

    问题 beego版本 v2 0 1 通过bee pack be GOOS linux 打包后运行可执行程序报错 如下 panic err go command required not found exec go executable fi
  • Vue+Element-ui Table 列求和

    Vue Element ui Table 列求和 Vue代码 求和getSummaries 效果图 Vue代码
  • [GameFramework分析] Log(日志)

    文章目录 使用 分析 Unity脚本 Log LogScriptingDefineSymbols ScriptingDefineSymbols DefaultLogHelper 框架类 GameFrameworkLogLevel GameF
  • graylog日志分析管理系统入门教程

    日志分析系统可以实时收集 分析 监控日志并报警 当然也可以非实时的分析日志 splunk是功能强大且用起来最省心的 但是要收费 免费版有每天500M的限制 超过500M的日志就没法处理了 ELK系统是最常见的 缺点是配置麻烦一些 比较重量级
  • MySQL之InnoDB引擎(一)

    1 InnoDB介绍 InnoDB是一个通用的存储引擎 同时具备高可靠性与高性能的特性 除非用户指定存储引擎的类型 否则其作为MySQL Server的默认存储引擎 使用InnoDB存储引擎的优势包括如下几点 DML操作符合ACID模型 使
  • 编码技巧——事务提交后执行

    日常开发中 一些诸如 先读后写 先写A再写B 先写A再执行B 的场景 一般都会用到事务 这里的事务指的是本地事务 如果涉及RPC 一般我们通过异步补偿来保证最终一致性 本篇例举2个使用事务 先写A再执行B 的场景 1 订单场景 1 处理支付
  • MeshTextPro 自动换行和自动缩放问题

    如果启用了autosize MeshTextPro会优先显示完一个单词之后才会进行换行 当此时如果一个单词过于场的话 MeshTextPro会对其进行缩放 直至当前行可以显示完整单词之后 在进行换行处理 如果需要自动缩放 但是又想其填满一行
  • 一文读懂元宇宙--元宇宙含义

    元宇宙是 虚实融合的世界 包含模拟现实的虚拟世界 创新的虚拟世界 现实世界 也是元宇宙的一部分 虚拟和现实世界的融合 将高于 超越单一的虚拟或者现实世界 虚实融合的世界 图片来源于德勤 元宇宙的四层含义 图片来源于德勤 1 1 模拟现实的虚
  • 神经网络(三)—— 神经元多输出

    本系列为慕课网 深度学习之神经网络 CNN RNN GAN 算法原理 实战 视频笔记 希望自己能通过分享笔记的形式更好的掌握该部分内容 往期回顾 神经网络 一 机器学习 深度学习简介 神经网络 二 神经元 Logistic回归模型 多分类的
  • 优化算法 - RMSProp算法

    文章目录 RMSProp算法 1 算法 2 从零开始实现 3 简洁实现 4 小结 RMSProp算法 1 算法 import math import torch from d2l import torch as d2l d2l set fi
  • APP版本升级与服务器交互

    踏入程序媛旅程已经快一年了 学生生涯也即将结束 正式踏入工作岗位 万事开头难 只能多问多记 久病成医 遇到的问题多了自己的技术也会有所提高 博客也一年了 之前一直想写博 然后各种拖延 到现在才开始 希望自己能坚持 项目中加了一个APP版本升
  • 一种基于深度学习的全自动纸心电图数字化算法

    深度学习在医学检测仪方面的应用 人们越来越关注将深度学习方法应用于心电图 ECG 最近的研究表明 神经网络 NN 可以仅通过 ECG 预测未来的心力衰竭或心房颤动 然而 神经网络的训练需要大量的心电图 而目前很多心电图只是纸质的 不适合神经
  • win10安装pycocotools遇到的问题(gcc.exe failed with exit status 1)

    背景安装pycocotools一直过不去 一直报错 PS C Users peter gt pip install git https github com philferriere cocoapi git subdirectory Pyt
  • Java —— 有关存储学生信息数组的操作

    class Test public class Test public static void main String args TODO Auto generated method stub Student s s new Student
  • 启动elasticsearch报错处理方式

    启动elasticsearch报错 bootstrap check failure 1 of 1 memory locking requested for elasticsearch process but memory is not lo
  • Flask web页面加载很慢的原因

    直接上正题吧 Flask写了个简单的页面 居然加载超过30s 排查问题发现如下 能想象加载3分钟后还是失败的心情嘛 解决方法如下 添加CDN 就是让游览器加载moment js时 不需要中介直接找到moment js文件 做法 在momen
  • Vue动态改变title的标题及图标

    1 首先安装 vue wechat title包 npm install vue wechat title save 2 引入包 设置每个页面的标题 在mian js中引入 作为全局使用 import VueWechatTitle from