Vue中修改浏览器标题和图标

最新推荐文章于 2024-08-13 14:34:22 发布
最新推荐文章于 2024-08-13 14:34:22 发布
阅读量5.8k 收藏 3
点赞数
分类专栏： VUE 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lw_1220/article/details/94389971
版权

1.引入图标，在index.html中引入

2.index.html实现代码如下：

<link rel="icon" type="image/x-icon" href="./src/assets/icon/Vue.png">

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>Vue</title>

<link rel="icon" type="image/x-icon" href="./src/assets/icon/Vue.png">

</head>

<body>

<div id="app"></div>

</body

</html>

3.实现效果如下：

峰峰崛起的我
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue/vue3/js来动态修改我们的界面浏览器上面的文字和图标
浩星
01-10 2232
vue/vue3/js来动态修改我们的界面浏览器上面的文字和图标
vue项目如何添加改变浏览器标签title的标题
ADLF
02-10 1万+
第一步:在main.js文件里添加 // 设置浏览器标题 Vue.directive('title', { inserted: function (el, binding) { document.title = el.dataset.title } }) 第二步:在组件任意一位置添加 &lt;template&gt; &lt;div class="main" v...
Vue项目中动态修改浏览器标题title
wfyh1314的博客
07-26 406
问题：项目需要根据接口动态修改浏览器title。
vue2项目设置浏览器标题title及图标logo
小韩要快乐！
03-26 4017
vue2 修改网页标题和图标
vue动态修改标签页的icon、系统名称
wytraining
01-13 3699
vue动态修改标签页的icon、系统名称
vue 修改浏览器title
weixin_50367873的博客
06-17 1665
vue 在public 文件夹中有一个index.html，直接修改title中的值即可。这是最low的方法。 当然你的项目如果是使用webpack或者是vue-cli创建出来的项目，那么你会在title的地方看到 <%= htmlWebpackPlugin.options.title %> //或 <%= webpackConfig.name %> 动态修改title 方法一、 第一步：在main.js里面添加一个全局指令 Vue.directive('title', { i
vue修改浏览器的标题和图标
Zt0118的博客
04-06 2278
一，改标题title 方法一：直接在public/index.html中修改title即可，如下： 方法二： 在main.js中添加一下代码 Vue.directive('title', { inserted: function (el, binding) { document.title = el.dataset.title } }) 再在app.vue中添加： v-title data-title="自己的标题内容" 如图： 一，改图标 把图片名字改一下
修改浏览器的标题和图标
BaiZhouNBB的博客
05-07 1101
一，改标题内容 直接在public/index.html中修改title 二，改标题图片 将.ico格式的图片放到public路径下面 再在public/index.html中更换图标名称 png转ico工具：PNG转ICO - 在线转换图标文件PNG转ICO - 免费在线转换PNG(Portable Network Graphics)文件到ICO(Microsoft icon)文件 - 在线转换图标文件。https://www.aconvert.com/cn/icon/...
Vue项目添加动态浏览器头部title的方法
10-18
在动态设置浏览器标题的场景中，我们可以创建一个专门的mutation来更新Vuex中的标题状态。 当路由发生变化时，我们可以在Vue Router的导航守卫中添加逻辑，从当前路由的"name"属性获取标题，然后使用Vuex的commit...
vue项目改图标_VUE3 项目自定义修改网页标题和图标
weixin_39526546的博客
12-19 1292
VUE3中，网页图标默认使用的是VUE自带的一个ico的图标，也是VUE的logo。那么作为我们自己开发的项目，如何自定义修改网页的图标和标题呢？很简单，下面就介绍一下。1 标题修改标题修改直接在项目的 /public/index.html中修改title标签即可。明月网址导航2 图标修改这个修改相对来说，需要以下几个步骤。1)首先做一个ico的小图标，命名为 favicon.ico 放在 /pu...
小白也懂的若依中修改浏览器网页与左侧菜单栏标题与图标
weixin_52890053的博客
12-20 2690
小白也懂的若依中修改浏览器网页与左侧菜单栏标题与图标，面向0基础的若依初学者！
vue项目中如何修改网页地址栏中小图标（网站logo）+文字
最新发布
joan_yb的博客
08-13 470
vue项目中如何修改网页地址栏中小图标（网站logo）+文字
【浏览器】【vue】修改网页上的页签图标
jieweiwujie的博客
01-20 3028
document.querySelector("link[rel='icon']");
vue项目修改浏览器图标以及标题
青衫折扇的博客
09-20 1万+
favicon.ico一般用于作为缩略的网站标志,它显示位于浏览器的地址栏或者在标签上,用于显示网站的logo,如图红圈的位置， 目前主要的浏览器都支持favicon.ico图标. 目前vue-cli搭建的vue项目里面已经有了一个static文件夹，存放静态文件。 然后去index.html在head下添加： <link rel="icon" href="static/im......
vue修改浏览器的标题
xinzi11243094的博客
06-01 6721
第一步：在main.js里面添加一个全局指令Vue.directive('title', { inserted: function (el, binding) { document.title = el.dataset.title } })第二步：在要调用的组件里面，随便找一个div加入如下代码v-title data-title="我的"...
vue-cli 设置网页左上角icon图标
ShiYadong的专栏
04-19 9867
把.ico文件放在根目录下的static文件夹下，然后link标签引入 &lt;link rel="shortcut icon" href="./static/favicon.ico"&gt;
Vue动态修改浏览器图标及标题
国服可爱玩家的BLOG
04-20 561
项目中一般会有需求：**浏览器标题的显示是当前所在菜单**。 这时我们需要通过动态设置浏览器标题，达到该效果。 1.安装插件 npm vue-wechat-title --save 或者 npm install --save vue-wechat-title 如果上述两个命令失败，则根据提示安装即可。 2.在main.js里面引入插件 import VueWechatTitle from 'vue-wechat-title' //动态修改浏览器标题 Vue.use(VueWechatTitle) 3.在路
vue修改浏览器的标题title
热门推荐
大乌鸦
05-30 2万+
方法一： 第一步：在main.js里面添加一个全局指令 Vue.directive('title', { inserted: function (el, binding) { document.title = el.dataset.title } }) 第二步：在要调用的组件里面，随便找一个div加入如下代码 v-title data-title="我的" 案例： ...
vue更改浏览器的标题
05-27
要更改浏览器的标题，你可以使用Vue.js提供的$nextTick方法配合document.title属性来实现。具体步骤如下： 1. 在Vue组件中使用$nextTick方法，确保DOM已经渲染完毕。 2. 在$nextTick的回调函数中，设置document.title属性为你想要的标题。 下面是一个示例代码： ``` <template> <div> <h1>这是页面标题</h1> </div> </template> <script> export default { mounted() { this.$nextTick(() => { document.title = '新的页面标题' }) } } </script> ``` 当页面渲染完毕后，浏览器的标题就会被更改为“新的页面标题”。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值