vue中不同页面设置title和icon

2023-11-10

路由中增加meta对象

 {
        path: '/accounting',
        name: 'accounting',
        component: () => import('../pages/accounting/Accounting.vue'),   //记账
        meta: {
          title:"芒果记账",
          icon:"./jz.ico"
        }
      },

 在主页监听路由,改变title和icon

   watch(
      // 监听路由改变
      () => route,
      (val) => {
        // 设置页面自己的title和icon
        if (Object.keys(val.meta)) {
          document.title = `${val.meta.title}`;
          const link = document.querySelector("[rel='icon']");
          link.setAttribute('href', `${val.meta.icon}`);
        }
      },
      { immediate: true } //立即执行一次
    );
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

vue中不同页面设置title和icon 的相关文章

随机推荐

  • 嵌入式学习--vi的基本命令二

    嵌入式学习 vi的基本命令二 vi查找命令 vi替换命令 vi复制和剪切命令 vi查找命令 string 查找字符串string n继续向下查找 N向上查找 按回车后 光标的位置直接跳转到字符char的前面 vi替换命令 范围 s 旧str
  • 2021 字节跳动面试总监首发 1121 道 LeetCode 算法刷题笔记(含答案)

    关于算法刷题的困惑和疑问也经常听朋友们提及 这份笔记里面共包含作者刷 LeetCode 算法题后整理的数百道题 每道题均附有详细题解过程 很多人表示刷数据结构和算法题效率不高 甚是痛苦 有了这个笔记的总结 对校招和社招的算法刷题帮助之大不言
  • Windows与网络基础-1-2-虚拟机安装Windows10/ server2016

    目录 一 下载虚拟机软件 1 1新建虚拟机 1 2选择操作系统类型和windows版本 1 3自定义虚拟机名称 1 4设置最大磁盘大小 1 5配置内存和处理器 1 6挂载镜像文件 1 7进入window配置界面 二 点击进去按步骤安装即可
  • 常用邮箱工具类

    废话不多说 直接上代码 自个耍 package com example demo util import javax mail import javax mail internet InternetAddress import javax
  • 多线程基础篇(包教包会)

    文章目录 一 第一个多线程程序 1 Jconsole观察线程 2 线程休眠 sleep 二 创建线程 三 Thread类及常见方法 1 Thread 的常见构造方法 2 Thread 的几个常见属性 3 启动线程 start 4 中断线程
  • 宝塔面板忘记用户名,忘记密码怎么办?

    1 重新设置密码找回用户名 情况一 已经修改过用户名和密码 很多网上的解决方法都只是告诉我们进入SSH设置 但是很多小伙伴并不知道怎么进入SSH 导致解决该问题很麻烦 其实我们直接在阿里云中云服务器中的远程连接就可以解决这个问题 第一步 直
  • 利用security.js实现RSA加密

    在项目中遇到要对用户输入的密码进行RSA加密的需求 总结一下实现过程 div div
  • Android和java两平台AES的互相加密解密

    import java io UnsupportedEncodingException import java security InvalidKeyException import java security Key import jav
  • 什么是多态机制?Java语言是如何实现多态的?

    多态是指程序中定义的引用变量所指向的具体类型和通过该引用变量发出的方法调用 在编程时并不确定 而在程序运行期间才确定 即一个引用变量到底会指向哪个类的实例对象 该引用变量发出的方法到底调用哪个类中实现的方法 必须由程序运行期间才能决定 因为
  • 计算机系统唯一能识别的不需要翻译,第一章 计算机基础知识06966new.ppt

    第一章 计算机基础知识06966new ppt 第一章 计算机基础知识 2 1 计算机软件系统 输入计算机的信息一般有两类 一类称为数据 一类称为程序 计算机是通过执行程序所规定的各种指令来处理各种数据的 1 指令 是指示计算机执行某种操作
  • IntelliJ IDEA(九) :酷炫插件系列

    最近项目比较忙 很久没有更新IDEA系列了 今天介绍一下IDEA的一些炫酷的插件 IDEA强大的插件库 不仅能给我们带来一些开发的便捷 还能体现我们的与众不同 1 插件的安装 打开setting文件选择Plugins选项 Ctrl Alt
  • 尊云服务器出问题,云服务器用户常见问题

    云服务器用户常见问题 Q 装预装操作系统以后的默认密码是什么 A 默认的密码和云服务器开通时输入的密码是一样的 就是一个用户一个密码 不是固定的 Q 云服务器中如何划分硬盘的分区 A 云服务器系统系统安装后 默认只有一个10G的C盘用于操作
  • Android进阶:架构师花费近一年时间整理出来的安卓核心知识,聪明人已经收藏了!

    我们程序员经常迷茫于有太多东西要学 有些找不到方向 不知所措 很多程序员都愿意说 我想变得更好 但是更好是什么却很模糊 同时我们又不知道该怎么样去做 我们的生命如此短暂 作为程序员的职业生涯可能会更短 所以我们更加需要充分利用工作 工作间隙
  • 踩坑,发现一个ShardingJdbc读写分离的BUG

    前言 最近公司准备接入ShardingJdbc做读写分离了 老大让我们理一理有没有写完数据立马读的场景 因为主从同步是有延迟的 如果写完读取数据走到从库 而从库正好有延迟 没读取到数据 岂不是造成了生产事故 今天我们来看看 Sharding
  • CUDA和TensorRT入门

    CUDA 官方教程 CUDA C Programming Guide nvidia com 一 基础知识 首先看一下显卡 GPU 和CUDA的关系介绍 显卡 GPU和CUDA简介 吴一奇的博客 CSDN博客 延迟 一条指令返回的时间间隔 吞
  • 【无标题】【Atlas 200DK】YOLOv3和YOLOv5部署

    Atlas 200DK YOLOv3和YOLOv5部署 数据集介绍 开发板环境搭建 YOLOv3的部署 模型训练转换 服务器上的结果 开发板上的结果 python部署 c 部署 YOLOv5的部署 模型训练转换 服务器上的结果 开发板上的结
  • python 开发游戏的库有哪些

    在 Python 中 开发游戏的一些常用库有 Pygame 一个用于制作游戏的开源模块 支持多种图像 声音和输入处理 Pyglet 一个跨平台的游戏引擎 支持 OpenGL 图形渲染 PyOpenGL 一个实现了 OpenGL 功能的库 可
  • G2O

    slam十四讲 g2o代码运次错误 error no matching function for call to g2o BlockSolver
  • python中pd读取csv二进制_python用pd.read_csv()方法来读取csv文件

    importpandas as pdprint 取消第一行作为表头 data2 pd read csv rating csv header None print 为各个字段取名 data3 pd read csv rating csv na
  • vue中不同页面设置title和icon

    路由中增加meta对象 path accounting name accounting component gt import pages accounting Accounting vue 记账 meta title 芒果记账 icon