博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Vue.js项目中管理每个页面的头部标签的方法
阅读量:7086 次
发布时间:2019-06-28

本文共 450 字,大约阅读时间需要 1 分钟。

原文链接:

在 Vue SPA 应用中,如果想要修改 HTML 的头部标签,如页面的 title,我们只能去修改index.html模板文件,但是这个是全局的修改,如何为每个页面都设置不一样的 title 呢?下面介绍两种方法。

使用router.meta

在路由里面配置每个路由的地址:

在每一个meta里面设置页面的title名字,最后在遍历

这样就为每一个VUE 的页面添加了title。

使用vue-meta插件

vue-meta 主要用于管理 HMTL 头部标签,同时也支持 SSR。vue-meta有以下特点:

在组件内设置 metaInfo,便可轻松实现头部标签的管理

metaInfo 的数据都是响应的,如果数据变化,头部信息会自动更新

支持 SSR

在页面里面增加 metaInfo 选项

更多vue-meta使用请参考Github官网:https://github.com/declandewet/vue-meta

坚持原创、坚持干货。关注我的公众号,第一时间接收原创、干货文章。

转载地址:http://pggml.baihongyu.com/

你可能感兴趣的文章
mac 下批量转换文件类型
查看>>
何为DOM对象
查看>>
linux的yum仓库配置
查看>>
XSUPERSMS COME ON
查看>>
JSR与MR的区别
查看>>
华为存储不是昙花一现
查看>>
沟通是一种感知
查看>>
学会这二十个正则表达式,能让你少些1000行代码!
查看>>
关于Cocos Creator脚本执行顺序的几点补充
查看>>
Powershell-Exchange:设置分层通讯薄中通讯组的优先级
查看>>
开启好用的Lync联系人即时模糊搜索功能
查看>>
Microsoft Hyper-V Server 2012开启虚拟化-SMB 3.0
查看>>
Powershell管理系列(十二)Exchange新启用的邮箱禁用OWA及Activesync的访问
查看>>
Windows 8上安装本地回环网卡
查看>>
Exchange Server 2013系列十二:邮箱的基本管理
查看>>
[C#进阶系列]专题二:你知道Dictionary查找速度为什么快吗?
查看>>
并发连接数、请求数、并发用户数
查看>>
SDA报告给各国网络空间安全防卫水平进行评级
查看>>
去小机化思维(二)--【软件和信息服务】2015.03
查看>>
【翻译】Sencha Cmd中脚本压缩方法之比较
查看>>