vue踩坑填坑(四):在vue单页中修改title

2023-10-27

由于在vue单页应用中title只设定在入口文件index.html,如果切换路由,title怎么更换?

在路由router中设置meta:

{
      path:'/chooseBrand',
      component: resolve => require(['../components/page/ChooseBrand.vue'], resolve),
      meta: {
        title: 'title标题'
      }
},

后面加上:

router.beforeEach((to, from, next) => {
  /* 路由发生变化修改页面title */
  if (to.meta.title) {
    document.title = to.meta.title
  }
  next()
})

这样的话在切换路由时就会更换你在meta中设置的title。




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

vue踩坑填坑(四):在vue单页中修改title 的相关文章

随机推荐

  • 【备忘】Unity IOS 覆盖安装后进游戏黑屏

    情景 unity LuaFrameWork UGUI V2 把资源打在包内用于过审 上架appStore后 覆盖安装下进游戏出现黑屏情况 上一版本是打小包过审 即大部分资源在进游戏后下载 推测 查看项目代码后 发现资源路径没有按版本号区分
  • 进行人工智能机器人研发,应该选择哪种编程语言?

    2019独角兽企业重金招聘Python工程师标准 gt gt gt 这个问题大多数新的机器人专家在他们的职业生涯中至少会思考一次 不幸的是 这也是一个没有直接答案的问题 如果你在 Stack Overflow Quora Trossen R
  • 运行springmvc时出现如下错误org.springframework.web.servlet.DispatcherServlet noHandlerFound

    出现错误 八月 12 2018 10 46 42 上午 org springframework web servlet DispatcherServlet noHandlerFound 警告 No mapping found for HTT
  • 飞书小程序开发

    1 tt showModal后跳转页面 跳转路径要为绝对路径 相对路径跳转无响应 2 手机息屏后将不再进入onload 生命周期 直接进入onshow 生命周期 onLoad 在页面初始化的时候触发 一个页面只调用一次 onShow 在切入
  • 杀死“比尔”

    所有人有一个初始的生命值 一个警官要杀一个人则该人的生命值减p 其他人则减Q 最少要杀多少次才可以把所有人杀掉 百度笔试手速太慢 没敲上去 可怜 include
  • 【观察】浪潮K1 Power:产业升级换挡提速,关键计算保驾护航

    今天 国家对数字经济给予了前所未有的高度重视 在 十四五 规划中 国家就明确提出了要将数字经济核心产业增加值占GDP的比重从7 8 提高到10 这也意味着未来整个计算产业将会迎来更大的需求 而算力也将成为数字经济时代的核心生产要素 在此过程
  • LeetCode 150. 逆波兰表达式求值

    题目链接 150 逆波兰表达式求值 遍历所有元素 如果当前元素是整数 则压入栈 如果是运算符 则将栈顶两个元素弹出做相应运算 再将结果入栈 最终表达式扫描完后 栈里的数就是结果 数组模拟栈 class Solution public int
  • Redis高级之IO多路复用和epoll(十二)

    nginx 的反向代理也是采用了IO多路复用 1 是什么 I O 网络 I O 多路 多个客户端连接 连接就是套接字描述符 即socket 或者 channel 指的是多条 TCP 连接 复用 用一个进程来处理多条的连接 使用单进程就能实现
  • 贪心算法三个经典例题

    贪心算法的三个经典例题 A Saruman s Army 题目描述 Saruman the White must lead his army along a straight path from Isengard to Helm s Dee
  • JVM:常用的四种垃圾回收机制

    1 CMS Concurrent Mark Sweep 并行 标记清除 老年代垃圾回收机制 cms是一个基于标记 清除 算法的综合多种算法的老年代垃圾回收器 适用场景 重视服务器响应速度 要求系统停顿时间最短 这里要说明下 这是一个老年代算
  • posefs1.perception.cs.cmu.edu 无法访问

    我尝试练习openpose时 发现运行的代码缺乏coffee的model 需要执行models 下的bat或sh 但是 posefs1 perception cs cmu edu 无法访问 从Kaggle上下载 https www kagg
  • Java学到什么程度才能叫精通?

    把下面这些内容掌握以后 你就可以自诩精通Java后端了 1 计算机基础 这部分内容是计算机相关专业同学的课程 但是非科班的小伙伴 譬如在下 就需要花时间恶补了 特别 是计算机网络 操作系统 数据结构这三门课程 至于编译原理 个人大概懂一点就
  • 段页式存储及分段分页优缺点分析,对比(王道考研_操作系统)

    分段分页优缺点分析 段页式管理 将进程按照逻辑模块分段 再将各段分页 再将内存空间分为大小相同的页框 最后将各个页装入各个内存块中 基本分段存储管理 与分页相比 离散分配时所分配的地址空间的基本单位不同 定义 进程的地址空间 按照程序的自身
  • STL中常用的排序算法

    merge 以下是排序和通用算法 提供元素排序策略 merge 合并两个有序序列 存放到另一个序列 例如 vecIntA vecIntB vecIntC是用vector
  • Git 版本回退与前进(03)

    现在 你已经学会了修改文件 然后把修改提交到Git版本库 现在 再练习一次 修改readme txt文件如下 Git is a distributed version control system Git is free software
  • 理解attention的image to caption(图片的文字描述)

    更多查看 https github com B C WANG AI Storage 4 1 理解attention的image to caption 图片的文字描述 4 1 1 一 一个简单模型 Encoder 使用预训练的CNN进行fin
  • flex局部的知识总结(转载)

    版权声明 本文为CSDN博主 Coralpapy 的原创文章 遵循CC 4 0 BY SA版权协议 转载请附上原文出处链接及本声明 原文链接 https blog csdn net Coralpapy article details 120
  • 用limma包的voom方法来做RNA-seq 差异分析

    用limma包的voom方法来做RNA seq 差异分析 大家都知道 这十几年来最流行的差异分析软件就是R的limma包了 但是它以前只支持microarray的表达数据 考虑到大家都熟悉了它 它又发了一个voom的方法 让它从此支持RNA
  • Python-绘制七段数码管

    SevenDigitsDrawV2 py import turtle time def drawGap 绘制数码管间隔 turtle penup turtle fd 5 def drawLine draw 绘制单段数码管 drawGap t
  • vue踩坑填坑(四):在vue单页中修改title

    由于在vue单页应用中title只设定在入口文件index html 如果切换路由 title怎么更换 在路由router中设置meta path chooseBrand component resolve gt require compo