vue项目中，js代码动态控制网页的link标签与title内容

最新推荐文章于 2025-03-05 16:18:52 发布
最新推荐文章于 2025-03-05 16:18:52 发布
阅读量2.2k 收藏
点赞数 1
分类专栏： 笔记 文章标签： javascript vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/gebieren/article/details/128239035
版权
在Vue项目开发中，为了实现根据子系统动态调整link标签和页面标题的功能，作者创建了一个简单的demo。通过在路由定义中设置meta信息，并在app.vue中使用Vue的ref、watch和computed属性监听路由变化，动态更新document的title和link标签的href，从而实现动态图标和标题的效果。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

最近正在开发一个微模块系统，产品想要根据子系统的不同，动态生成link标签与title中的内容，于是就做了一个简单的demo，希望分享出来给到后续有同样需求的伙伴，共勉。

  1. 首先肯定是需要有一套**.svg**的图标来对应相应的系统，那就安排（我是放在public文件中，这样build的时候不会进行处理，方便随时根据ui设计进行替换）。在这里插入图片描述

  2. 由于title内容产品需要跟菜单一致，那就直接在路由定义好（此处命名跟svg一致，方便后面取值，见下图标注）：在这里插入图片描述

  3. 接下来就直接在app.vue中添加动态控制的代码了（重要）在这里插入图片描述

  4. 最终效果如下：在这里插入图片描述

最低0.47元/天 解锁文章
Vue 2 实战教程：动态表单与快捷标签功能开发 前端开发：用 Vue 2 实现备注功能页面（附代码解析） 从零开始用 Vue 2 实现动态备注输入与标签选择功能 Vue 2 项目：如何构建交互式备注
南北极之间
11-21 774
Vue 2 实战教程：动态表单与快捷标签功能开发 前端开发：用 Vue 2 实现备注功能页面（附代码解析） 从零开始用 Vue 2 实现动态备注输入与标签选择功能 Vue 2 项目：如何构建交互式备注与标签功能页面 Vue 2 开发实战：打造动态备注页面（输入框+标签+提交功能）Vue 2 实战教程：动态表单与快捷标签功能开发 前端开发：用 Vue 2 实现备注功能页面（附代码解析） 从零开始用 Vue 2 实现动态备注输入与标签选择功能 Vue 2 项目：如何构建交互式备注与标签功能页面 Vue 2 开发
vue-link:一个将它们链接在一起的组件:link:
05-13
VueLink-一个链接所有组件的组件！ 用于外部和vue-router链接的轻量级包装器组件。 :fire: 特征 微小的功能组件 SSR安全（与Nuxt.js配合使用） 经过良好测试并记录在案 兼容Node 8.0+ Vue（和vue-router）是唯一的依赖项 高度可定制 :magnifying_glass_tilted_right: 入门 :package: 通过NPM $ npm install vue-link 同步导入 import VueLink from 'vue-link' // or the slash-forcing variants // import { VueLink, VueLinkAddSlash, VueLinkStripSlash } from 'vue-link' export default { components : { VueLink } } 异步导入 export default { co
使用js动态添加link标签
aohudai3633的博客
02-20 1531
一下代码实现的功能： 　　通过判断电脑分辨率，不同的分辨率显示不同的css文件 　　我的需求只需要适配两个分辨率 varscrWidth=window.screen.width; //获取当前分辨率的大小 if(scrWidth == 1920){ //当分辨率为1920是应该引入的css var headHTML ...
link标签和Script标签以及加载方式的区别
最新发布
secketl的博客
03-05 401
指定外部资源，建立html和外部资源的联系。
通过js动态创建link标签
不靠谱的作曲家
02-21 2222
var url = "css/common.css" var link=document.createElement("link"); link.setAttribute("rel", "stylesheet"); link.setAttribute("type", "text/css"); link.setAttribute("href", url); document.getElementsByTagName("head")[0].appendChild(link)
动态加载css，js，动态创建link标签,script标签
小龚的博客
03-17 1256
欢迎点击: 个人官网博客 老规矩，先上效果图 创建Link标签 //createLink('./css/phone.css') function createLink(cssURL) { let head = document.getElementsByTagName('head')[0] let linkTag = document.createElement('link') linkTag.id = 'dynamic
vue的link
viviliving的专栏
08-31 1589
<template> <div> <p>例子列表</p> <ul> <li><router-link :to="{name: 'Hello'}"> Hello </router-link>: 显示最基本的Vuejs</li> </ul> </div> </templa.
详解如何在vue项目中使用layui框架及采坑
10-17
在Vue项目中集成layui框架可能遇到的挑战及解决方法 layui是一款流行的前端UI框架，它提供了丰富的组件和优雅的设计风格。然而，在Vue这样的现代前端框架中使用layui并不像在传统HTML页面中那样直接。本文将深入...
Vue 实现对quill-editor组件中的工具栏添加title
10-15
在Vue项目中，我们经常会用到富文本编辑器，如Quill Editor，它是一个功能强大的开源富文本编辑器。然而，默认情况下，Quill Editor的工具栏按钮没有提供中文的title提示，这对于中文用户来说可能不够友好。本文将...
vue项目中实现的微信分享功能示例
01-21
本文实例讲述了vue项目中实现的微信分享功能。分享给大家供大家参考，具体如下： /* 微信分享 */ Vue.prototype.wechatShare = (shareData) => { let resource = { title: '随我心愿！', desc: '体验优质服务', ...
Vue中router-link标签的使用
weixin_45616246的博客
04-15 1216
请陛下批阅 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>路由的router-link</title> <script src="../../vue/vue-v2.6.11.js"></scr...
link中调用js方法
07-07
link中调用js方法 link中调用js方法link中调用js方法link中调用js方法
js html 新增link,使用js动态添加link标签
weixin_39636226的博客
06-03 1240
一下代码实现的功能：通过判断电脑分辨率，不同的分辨率显示不同的css文件我的需求只需要适配两个分辨率varscrWidth=window.screen.width; //获取当前分辨率的大小if(scrWidth == 1920){ //当分辨率为1920是应该引入的cssvar headHTML = document.getElementsByTagName('head')[0]....
Vue的router-link标签
lianflower的博客
07-09 256
https://www.cnblogs.com/mr-wuxiansheng/p/11309507.html
link js重构心得
dhfv737x的专栏
02-17 426
过年前后一段时间，对link库的代码进行的大量的重构，代码精简了许多，性能也得到了很大的改善，写此文记录期间所做的改进和重构，希望对看到此文的js程序员有所帮助。 1. 代码构建 最初代码使用gulp 结合concat 等插件组合文件生成库文件, 现在用的是rollup ,号称是下一代js模块打包器， 结合buble 插件将es6代码编译为es5 , 和cleanup插件删除不必要的注释和空行
vue、js获取页面中所有css样式（包括link标签）案例为打印使用
ZuoZuoDangerou的博客
09-06 1436
最近碰到一个需求：将弹窗中的表单打印出来，还要保留弹窗表单的样式，为了对页面造成的影响最小采取iframe方案。
Vue 标签router-link 作用、用法
A乐神的博客
01-18 5397
Vue 标签router-link 作用、用法
js html 新增link,JavaScript动态创建link标签到head里的方法
weixin_29155599的博客
06-03 1512
本文实例讲述了JavaScript动态创建link标签到head里的方法。分享给大家供大家参考。具体分析如下：相信有很多做前端的朋友碰到过需要用 JavaScript 动态创建样式表标签——link标签。这里我们就来说说如何在浏览器中动态创建link标签。使用 jQuery 创建 link 标签如果你开发中喜欢用jQuery，那么用jQuery在创建link标签应该是这样的：var cssURL ...
2024最全前端面试系列（数据结构篇）（大厂必考算法）
youpccc的博客
03-29 1174
javascript是前端必要掌握的真正算得上是编程语言的语言，学会灵活运用javascript，将对以后学习工作有非常大的帮助。掌握它最重要的首先是学习好基础知识，而后通过不断的实战来提升我们的编程技巧和逻辑思维。这一块学习是持续的，直到我们真正掌握它并且能够灵活运用它。如果最开始学习一两遍之后，发现暂时没有提升的空间，我们可以暂时放一放。继续下面的学习，javascript贯穿我们前端工作中，在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解，关键是灵活运用。
掌握BootStrap与Vue.js的项目实战教程
通过了解Bootstrap和Vue.js的基本知识点和在项目中的具体应用方法，开发者可以更加高效地构建出既美观又具有动态交互的Web应用。不论是单独使用这两个技术中的任何一个，还是将它们结合起来使用，都能够发挥各自的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值