vue项目动态修改网页title+icon(通过接口获取title值+icon图片网址)

找了好多  都是路由守卫修改或者安插件好麻烦,来点简单的干货:

按照下边图片添加(接口需要自己去api文件夹写,这里就不多解释了,我这里用的是字典的格式方便随时替换和更改--一个地方配多个地方受益)

本文主要讲一下在哪个文件可以更改,不要浪费时间去度娘了;;;

首先找到App.vue(入口文件一般就在src文件夹下)

{name:这里装的就是接口获取的名字} 

{logourl:装的是后端传回来的icon需要的href的地址http://`````````啥啥的}

然后找第二个文件public/index.html

 

这里放个占位标签,<link>标签只能放这里,再在App.vue页面的

var link = document.querySelector('link[rel*="icon"]')            获取到标签

然后给标签的href赋值获取的图片网址

Vue3中使用Element UI实现侧边栏导航循环遍历icon的实现方法与上面所示的基本类似,只是需要使用Element UI提供的icon组件。以下是一个示例代码: ```html <template> <div> <el-menu :default-active="activeIndex" class="el-menu-vertical-demo" @select="handleSelect"> <el-menu-item v-for="(item, index) in navItems" :key="index" :index="index"> <i :class="item.icon"></i> <span slot="title">{{ item.title }}</span> </el-menu-item> </el-menu> </div> </template> <script> export default { data() { return { activeIndex: "0", // 默认选中项的索引 navItems: [ { title: "Home", link: "/", icon: "el-icon-s-home" // Element UI提供的icon类名 }, { title: "About", link: "/about", icon: "el-icon-info" }, { title: "Contact", link: "/contact", icon: "el-icon-message" }, // 循环遍历的数据可以自行添加或从后端API获取 ] }; }, methods: { handleSelect(index) { this.activeIndex = index; } } }; </script> ``` 在上面的代码中,`navItems`数组中存储了侧边栏导航的数据,包括每个导航项的标题、链接和图标类名。使用`v-for`指令在模板中循环遍历这些导航项,并将每个图标的类名绑定到`<i>`元素的`class`属性上,以显示相应的图标。同时,使用Element UI提供的`el-menu`和`el-menu-item`组件实现了导航菜单的基本结构,并使用`default-active`属性指定默认选中项的索引。在`handleSelect`方法中,我们可以监听导航菜单的`select`事件,更新选中项的索引并执行相应的操作。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值