Vue 动态修改网页标题和图标
VUE2:
二、普通方案,使用Vue-Router的beforeEach拦截
routes: [{path: '/',name: 'home',component: () => import('@/pages/home/index'),meta:{keepAlive: true}},{path: '/person/auth,name: 'personAuth',component: () => import('@/pages/person/auth),meta:{title: '功能授权',keepAlive: false}}]在路由的beforeEach 拦截器里处理router.beforeEach((to, from, next) => {/* 路由发生变化修改页面title */if (to.meta.title) {document.title = to.meta.title}
})
VUE3中,网页图标默认使用的是VUE自带的一个ico的图标,也是VUE的logo。那么作为我们自己开发的项目,如何自定义修改网页的图标和标题呢?很简单,下面就介绍一下。
1 标题修改
标题修改直接在项目的 /public/index.html中修改title标签即可。
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>明月网址导航</title>
</head>
2 图标修改
这个修改相对来说,需要以下几个步骤。
1)首先做一个ico的小图标,命名为 favicon.ico 放在 /public/下面,替换原有的 favicon.ico,同时删除 /public/img/icons/ 下面的VUE图片。
2)在根目录下面新建vue.config.js, 添加pwa
module.exports = {
pwa: {
iconPaths: {
favicon32: 'favicon.ico',
favicon16: 'favicon.ico',
appleTouchIcon: 'favicon.ico',
maskIcon: 'favicon.ico',
msTileImage: 'favicon.ico'
}
}
};
3 重启项目即可。
Vue 动态修改网页标题和图标相关推荐
- vue动态修改浏览器标题和图标
项目场景: 在一个功能一致的项目中,要分别部署成两个系统. 问题描述 两个系统名称不一致.标题不一致.logo不一致,又不想单独拉出一套代码(单独拉出后维护成本增加),想要动态改变. 解决方案: 在m ...
- 怎么改vue项目的标题_Vue动态修改网页标题的方法及遇到问题
业务需求,进入页面的时候,网页有个默认标题,加载的网页内容不同时,标题需要变更. 例:功能授权,功能授权(张三). Vue下有很多的方式去修改网页标题,这里总结下解决此问题的几种方案: 一.最笨方案 ...
- vue 项目修改网页 title 和 图标
修改网页 title 和 图标 网页 title 位置 和 图标位置 修改路径在 项目文件下的 public 文件夹下的 index.html 文件中的 title 里面 // 在html 中 引入文 ...
- VUE3 项目自定义修改网页标题和图标
VUE3中,网页图标默认使用的是VUE自带的一个ico的图标,也是VUE的logo.那么作为我们自己开发的项目,如何自定义修改网页的图标和标题呢?很简单,下面就介绍一下. 1 标题修改 标题修改直接在 ...
- vue项目更改网页标题与图标
1.基于vue-cli2.9.6的一个vue工程,找到index.html 2.修改网页的标题 3.添加图标语句,将图标放在static文件夹下面. <link rel="icon&q ...
- Vue动态修改网页浏览器标签的标题和图标
情景:平台功能支持修改系统的名称和图标,图标同步展示为浏览器页签的图标 效果: 1. main.js Vue.directive('title', {inserted: function (el, b ...
- 动态修改网页icon图标
动态修改网页icon图标 //如果在vue项目中 在App.vue下的 created() 中输入 var link = document.querySelector("link[rel*= ...
- 动态修改网页title
动态修改网页title //如果在vue项目中 在App.vue下的 created() 中输入 document.title = this.$store.state.user.name; //获取存 ...
- Gradle编译生成不同的版本,动态设定应用标题 / 应用图标 / 替换常量
转载请标明出处:http://blog.csdn.net/xx326664162/article/details/51508132 文章出自:薛瑄的博客 你也可以查看我的其他同类文章,也会让你有一定的 ...
最新文章
- evaluate函数使用无效_[Python实战]使用栈实现简易计算器
- 视频:参加ZDNet《小崔说事》谈知识管理
- xampp中apache不能启动解决方法 (share)
- Web UI⾃动化测试平台,专治Web 的各种疑难杂症。
- LeetCode【9-- 回文数】LeetCode【10 --正则表达式的匹配】
- mysql search yum_CentOS 7 yum安装配置mysql
- python requests cookies请求_python+requests实现接口测试 - cookies的使用
- 最短路(信息学奥赛一本通-T1382)
- 计算机网络——数据帧和数据包的区别
- mysql分表和分区的区别
- 拼多多前端岗位笔试试题 问答题部分 2017/8/1
- 查找算法------顺序查找
- 2022年电子考研经验分享,本科双非,一志愿南航,调剂国科大上岸
- 查询各科成绩的前三名的学生
- SQL server 2000个人版 下载地址
- [开源]免费天气预报接口,提供七天预报(包括省市代码)
- 我的ubuntu论坛账号
- 一次在中英街不爽的购物体验
- Java操作Word文档
- Android:启动优化