在前端开发的世界里,随着技术的不断发展和框架的日益丰富，各种工具和库层出不穷，为开发者带来了极大的便利，VueUse Head npm就是其中一个备受关注的工具，那么它究竟是什么？又该如何使用呢？下面我们就来详细了解一下。
VueUse Head npm是什么
VueUse Head npm是一个基于Vue.js的实用工具库，它主要用于管理页面的头部信息，比如
标签、<meta>标签等，在Vue项目中，我们经常需要动态地设置页面的标题、描述等元数据，VueUse Head npm就为我们提供了一种简洁高效的方式来实现这一功能。</p>
<p>它的出现,解决了传统方式下手动操作DOM来设置头部信息的繁琐和不便，通过VueUse Head npm，我们可以在Vue组件中以声明式的方式轻松管理页面的头部内容，使代码更加清晰、易于维护。</p>
<h2>VueUse Head npm的安装</h2>
<p>要使用VueUse Head npm，首先需要进行安装，在你的Vue项目目录下，打开终端，输入以下命令：</p>
```bash
npm install @vueuse/head
```
<p>或者如果你使用的是yarn,命令则是：</p>
```bash
yarn add @vueuse/head
```
<p>安装完成后,就可以在项目中引入并使用了。</p>
<h2>VueUse Head npm的基本使用</h2>
<h3>（一）在Vue组件中使用</h3>
<p>在Vue组件中使用VueUse Head npm非常简单，在组件的<script>标签中引入：</p>
```javascript
import { useHead } from '@vueuse/head'
```
<p>在组件的setup函数中使用：</p>
```javascript
export default {
setup() {
useHead({
title: '我的页面标题',
meta: [
{
name: 'description',
content: '这是一个关于VueUse Head npm的页面描述'
}
]
})
return {}
}
}
```
<p>这样,在页面渲染时，就会自动设置<title>标签为“我的页面标题”，并添加相应的
<h3>（二）动态更新头部信息</h3>
<p>我们需要根据用户的操作或者数据的变化来动态更新头部信息,VueUse Head npm也支持这一点，我们有一个按钮，点击它可以改变页面标题：</p>
```html
<template>
<button @click="changeTitle"></button>
</template>
<script>
import { useHead } from '@vueuse/head'
import { ref } from 'vue'
<p>export default {
setup() {
const title = ref('初始标题')
useHead({
title: () => title.value
})</p>
<pre><code>const changeTitle = () => {
title.value = '新标题'
}
return {
changeTitle
}</code></pre>
</script>
```
<p>在这个例子中,我们使用了Vue的响应式数据ref，当点击按钮时，title的值发生变化，页面的标题也会随之更新。</p>
<h2>VueUse Head npm的高级用法</h2>
<h3>（一）多个Head实例</h3>
<p>在一些复杂的项目中,可能需要多个Head实例来管理不同部分的头部信息，VueUse Head npm也支持这种情况，我们有一个主应用和一个子组件，都需要设置自己的头部信息：</p>
```javascript
// 主应用
import { useHead } from '@vueuse/head'
<p>useHead({ '主应用标题',
meta: [
{
name: 'application-name',
content: '主应用'
}
]
})</p>
<p>// 子组件
export default {
setup() {
useHead({
title: '子组件标题',
meta: [
{
name: 'component-name',
content: '子组件'
}
]
})
return {}
}
}</p>
<pre><code><p>这样，主应用和子组件的头部信息会合并显示，子组件的信息会覆盖主应用中相同类型的信息（比如标题）。</p>
### （二）与Vue Router结合
<p>在Vue项目中，Vue Router是常用的路由管理工具，VueUse Head npm可以很好地与Vue Router结合，根据不同的路由设置不同的头部信息。</p>
```javascript
import { useHead } from '@vueuse/head'
import { useRoute } from 'vue-router'
export default {
setup() {
const route = useRoute()
useHead({
title: () => {
switch (route.name) {
case 'home':
return '首页'
case 'about':
return '关于我们'
default:
return '默认标题'
}
}
})
return {}
}
}</code></pre>
<p>在这个例子中,根据当前路由的名称，动态设置页面的标题。</p>
<p>VueUse Head npm是一个非常实用的工具，它为Vue开发者提供了一种简洁、高效的方式来管理页面的头部信息，无论是基本的静态设置，还是动态更新、复杂场景下的多个实例以及与其他工具（如Vue Router）的结合使用，都能轻松应对，通过本文的介绍，相信你对VueUse Head npm有了更深入的了解，希望你在今后的Vue项目开发中能够充分利用它，提升开发效率，打造出更加优质的前端应用。</p> <div class="rights">
<h5>版权声明</h5>
<p>本文仅代表作者观点，不代表Code前端网立场。<br>本文系作者Code前端网发表，如需转载，请注明页面地址。</p> </div>
</div>
<div class="Prev_Next">
<span>上一篇：<a href="https://www.codeqd.com/post/20250520559.html">如何在 VueUse 中使用 height 相关功能？</a></span> <span>下一篇：<a href="https://www.codeqd.com/post/20250520561.html">VueUse Hotkey，前端交互的魔法密钥</a></span> </div>
</div>
<div class="related main_list">
<div class="title">相关文章</div>
<ul>
<li>
<strong>
<a href="https://www.codeqd.com/post/20261022129.html" title="Vue3动态组件怎么用才不踩坑？缓存、传参、类型全搞定">Vue3动态组件怎么用才不踩坑？缓存、传参、类型全搞定</a>
</strong>
<div class="listleft">
<p><a href="https://www.codeqd.com/post/20261022129.html">经常有人说Vue3的动态组件是个“省代码神器”，但用起来要么组件白刷新要么传参丢了要么TypeScript报错一堆警告，...</a></p>
<div class="listtag">
<a href="https://www.codeqd.com/tags/Vue3/" target="_blank">Vue3</a><a href="https://www.codeqd.com/tags/%E5%8A%A8%E6%80%81%E7%BB%84%E4%BB%B6/" target="_blank">动态组件</a> </div>
<div class="listinfo">
<span class="time">2小时前</span>
<span class="vew">60阅读</span>
<span class="cat"><a href="https://www.codeqd.com/vue/">#Vue</a></span>
</div>
</div>
<div class="img">
<a href="https://www.codeqd.com/post/20261022129.html"><img src="https://www.codeqd.com/zb_users/theme/yd1125free/include/random/2.jpg" alt="Vue3动态组件怎么用才不踩坑？缓存、传参、类型全搞定"></a>
</div>
</li>
<li>
<strong>
<a href="https://www.codeqd.com/post/20261022128.html" title="Vue3的diff算法是怎么工作的？和Vue2有什么本质区别？">Vue3的diff算法是怎么工作的？和Vue2有什么本质区别？</a>
</strong>
<div class="listleft">
<p><a href="https://www.codeqd.com/post/20261022128.html">很多人接触Vue，最初可能只是用着顺手，但慢慢会好奇：为什么列表更新的时候，不是整个销毁重建，而是只改需要改的地方？这就...</a></p>
<div class="listtag">
<a href="https://www.codeqd.com/tags/Vue3%20Diff%E7%AE%97%E6%B3%95/" target="_blank">Vue3 Diff算法</a><a href="https://www.codeqd.com/tags/Vue2%20Diff%E6%9C%AC%E8%B4%A8%E5%B7%AE%E5%BC%82/" target="_blank">Vue2 Diff本质差异</a> </div>
<div class="listinfo">
<span class="time">8小时前</span>
<span class="vew">213阅读</span>
<span class="cat"><a href="https://www.codeqd.com/vue/">#Vue</a></span>
</div>
</div>
<div class="img">
<a href="https://www.codeqd.com/post/20261022128.html"><img src="https://www.codeqd.com/zb_users/theme/yd1125free/include/random/8.jpg" alt="Vue3的diff算法是怎么工作的？和Vue2有什么本质区别？"></a>
</div>
</li>
<li>
<strong>
<a href="https://www.codeqd.com/post/20261022127.html" title="Vue3 defineExpose到底是啥？怎么用？为啥子ref拿到子组件是空对象？">Vue3 defineExpose到底是啥？怎么用？为啥子ref拿到子组件是空对象？</a>
</strong>
<div class="listleft">
<p><a href="https://www.codeqd.com/post/20261022127.html">最近接触Vue3的新手,十个有九个半都会问这个三连问——先是对着子组件用ref或者$refs拿不到数据/方法挠头，搜一下...</a></p>
<div class="listtag">
<a href="https://www.codeqd.com/tags/Vue3%20defineExpose/" target="_blank">Vue3 defineExpose</a><a href="https://www.codeqd.com/tags/%E5%AD%90%E7%BB%84%E4%BB%B6ref%E7%A9%BA%E5%AF%B9%E8%B1%A1/" target="_blank">子组件ref空对象</a> </div>
<div class="listinfo">
<span class="time">19小时前</span>
<span class="vew">515阅读</span>
<span class="cat"><a href="https://www.codeqd.com/vue/">#Vue</a></span>
</div>
</div>
<div class="img">
<a href="https://www.codeqd.com/post/20261022127.html"><img src="https://www.codeqd.com/zb_users/theme/yd1125free/include/random/8.jpg" alt="Vue3 defineExpose到底是啥？怎么用？为啥子ref拿到子组件是空对象？"></a>
</div>
</li>
<li>
<strong>
<a href="https://www.codeqd.com/post/20261022126.html" title="Vue3的生命周期钩子函数都有啥 具体怎么用">Vue3的生命周期钩子函数都有啥 具体怎么用</a>
</strong>
<div class="listleft">
<p><a href="https://www.codeqd.com/post/20261022126.html">刚上手Vue3的开发者,十有八九会绕不开生命周期钩子函数的疑问：原来Vue2那套beforeCreate、created...</a></p>
<div class="listtag">
<a href="https://www.codeqd.com/tags/Vue3%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E9%92%A9%E5%AD%90/" target="_blank">Vue3生命周期钩子</a><a href="https://www.codeqd.com/tags/Vue3%E9%92%A9%E5%AD%90%E5%87%BD%E6%95%B0%E7%94%A8%E6%B3%95/" target="_blank">Vue3钩子函数用法</a> </div>
<div class="listinfo">
<span class="time">1天前</span>
<span class="vew">655阅读</span>
<span class="cat"><a href="https://www.codeqd.com/vue/">#Vue</a></span>
</div>
</div>
<div class="img">
<a href="https://www.codeqd.com/post/20261022126.html"><img src="https://www.codeqd.com/zb_users/theme/yd1125free/include/random/6.jpg" alt="Vue3的生命周期钩子函数都有啥 具体怎么用"></a>
</div>
</li>
<li>
<strong>
<a href="https://www.codeqd.com/post/20261022125.html" title="刚转Vue3就卡壳？defineComponent到底是不是必须用？">刚转Vue3就卡壳？defineComponent到底是不是必须用？</a>
</strong>
<div class="listleft">
<p><a href="https://www.codeqd.com/post/20261022125.html">这个问题从哪冒出来的？别急，先看看官方是怎么说的
刚从Vue2跳到Vue3，或者刚学Vue3的朋友，可能都会碰到这个疑...</a></p>
<div class="listtag">
<a href="https://www.codeqd.com/tags/Vue3/" target="_blank">Vue3</a><a href="https://www.codeqd.com/tags/defineComponent/" target="_blank">defineComponent</a> </div>
<div class="listinfo">
<span class="time">1天前</span>
<span class="vew">773阅读</span>
<span class="cat"><a href="https://www.codeqd.com/vue/">#Vue</a></span>
</div>
</div>
<div class="img">
<a href="https://www.codeqd.com/post/20261022125.html"><img src="https://www.codeqd.com/zb_users/theme/yd1125free/include/random/3.jpg" alt="刚转Vue3就卡壳？defineComponent到底是不是必须用？"></a>
</div>
</li>
</ul>
</div> </div>
<!-- main_side -->
<div class="main_side">
<div class="widget widget_user">
<div class="userimg">
<img src="https://www.codeqd.com/zb_users/avatar/0.png" alt="terry"/>
<p><a href="https://www.codeqd.com/author-1.html" target="_blank">terry</a></p>
</div>
<div class="userpost">
<h5>作者文章</h5>
<ul>
<li>
<a href="https://www.codeqd.com/post/20261022129.html" target="_blank">Vue3动态组件怎么用才不踩坑？缓存、传参、类型全搞定</a>
<span>2小时前</span>
</li>
<li>
<a href="https://www.codeqd.com/post/20261022128.html" target="_blank">Vue3的diff算法是怎么工作的？和Vue2有什么本质区别？</a>
<span>8小时前</span>
</li>
<li>
<a href="https://www.codeqd.com/post/20261022127.html" target="_blank">Vue3 defineExpose到底是啥？怎么用？为啥子ref拿到子组件是空对象？</a>
<span>19小时前</span>
</li>
<li>
<a href="https://www.codeqd.com/post/20261022126.html" target="_blank">Vue3的生命周期钩子函数都有啥 具体怎么用</a>
<span>1天前</span>
</li>
<li>
<a href="https://www.codeqd.com/post/20261022125.html" target="_blank">刚转Vue3就卡壳？defineComponent到底是不是必须用？</a>
<span>1天前</span>
</li>
</ul>
</div>
<div class="umore">
<a href="https://www.codeqd.com/author-1.html" target="_blank" rel="nofollow">浏览更多</a>
</div>
</div>
<div class="widget widget_hot">
<div class="title">热门</div>
<ul>
<li>
<i>1</i>
<a href="https://www.codeqd.com/post/20251021376.html" target="_blank">
<strong>一、搜索引擎官方资源，从规则制定者那学底层逻辑</strong>
<span>想学好SEO但预算有限？不少刚入行或想转行做SEO的朋友，都在找免费又靠谱的学习渠道，毕竟SEO知识更新快，花钱买课怕踩坑，不如先从免费资源入手，把基础打牢、摸清行业逻辑再进阶，今天就拆透几个「免费学SEO不踩雷」的平台，不管你是纯新手、有...</span>
</a>
</li><li>
<i>2</i>
<a href="https://www.codeqd.com/post/20231120069.html" target="_blank">
<strong>Vue应用开发笔记：Electron Vue开发的实际应用案例</strong>
<span>今天，我们来介绍下Electron Vue开发的实际应用案例，一起往下学习吧！开头：Electron Vue开发的实际应用案例随着移动互联网的不断普及，桌面应用程序的需求也越来越多。而Electron Vue作为一种基于JavaScript...</span>
</a>
</li><li>
<i>3</i>
<a href="https://www.codeqd.com/post/20260521841.html" target="_blank">
<strong>Vue3中watch到底怎么用？避坑指南+全场景实例</strong>
<span>最近上手Vue3项目的前端小伙伴，好多都会来问：组合式API里的watch好像和之前Vue2的不太一样？一会儿要传ref一会儿传reactive的响应式数据，深度监听要不要加，什么时候用immediate？别急，今天咱们就用一问一答的方式，...</span>
</a>
</li><li>
<i>4</i>
<a href="https://www.codeqd.com/post/20260521842.html" target="_blank">
<strong>或者</strong>
<span>Vue3开发中怎么监听DOM元素高度变化，有哪些实用且兼容的方案？
刚接触Vue3的同学可能会沿用Vue2的watch+ref.offsetHeight的思路，结果发现数据更新后高度没变、异步加载内容后监听不到、窗口缩放时关联布局的高度错...</span>
</a>
</li><li>
<i>5</i>
<a href="https://www.codeqd.com/post/20260521844.html" target="_blank">
<strong>Vue watchEffect到底比watch好在哪？新手应该怎么用不踩坑？</strong>
<span>要搞懂Vue watchEffect，得先从它和老熟人watch的对比说起——很多新手刚接触Composition API时，会觉得这俩都是“监听数据变化做事”的API，用哪个都行，但其实场景完全不一样，甚至可以说没有直接的“谁替代谁”关系...</span>
</a>
</li><li>
<i>6</i>
<a href="https://www.codeqd.com/post/20260521845.html" target="_blank">
<strong>Vue3 composition api里的watch deep模式怎么用？踩过的坑和优化方案有哪些？</strong>
<span>先搞懂watch和watchEffect的区别——别上来就用watch deep
很多刚接触Vue3组合式API的同学,一碰到要监听复杂数据（比如对象、数组）的深层变化，第一反应就是开watch的deep:true，但其实deep模式真的...</span>
</a>
</li><li>
<i>7</i>
<a href="https://www.codeqd.com/post/20260521843.html" target="_blank">
<strong>Vue3中watch监听props传值后通过emit触发父组件事件容易出错吗？怎么正确用？</strong>
<span>在Vue3项目开发里，父子组件通信是每天都要碰的操作——子组件用props接父组件数据，用emit通知父组件改状态，中间常常用watch盯着props的变化，一旦符合条件就触发交互，但很多刚上手Vue3的开发者，甚至有些有Vue2基础的老手...</span>
</a>
</li><li>
<i>8</i>
<a href="https://www.codeqd.com/post/20260521846.html" target="_blank">
<strong>Vue3中watch监听props时，deep:true到底该不该随便开？</strong>
<span>聊起Vue3的watch，估计很多刚从Vue2转过来或者初学Vue的朋友，第一反应都是“监听变了就开deep”——毕竟嵌套深的数据，好像不加deep根本监听不到更新，但最近后台频繁收到类似的提问：“为什么我开了deep后，组件渲染卡得离谱？...</span>
</a>
</li><li>
<i>9</i>
<a href="https://www.codeqd.com/post/20260521847.html" target="_blank">
<strong>Vue3 Composition API watch开启deep后踩过哪些坑？如何高效用它处理深层数据监听？</strong>
<span>最近几年做前端开发，肯定绕不开Vue3，而Composition API又成了大家写逻辑的首选，在处理动态数据的时候，watch绝对是高频用到的API——但只要一碰深层的嵌套对象、数组，不加deep可能监听不到变化，加了deep又容易出各种...</span>
</a>
</li><li>
<i>10</i>
<a href="https://www.codeqd.com/post/20260521848.html" target="_blank">
<strong>做小程序英文翻译避不开哪些坑？怎么翻才能吸引海外用户留存？</strong>
<span>身边最近有位做东南亚汉服配饰跨境的朋友,上个月刚上线了全英文微信海外版小程序，结果一周下来连个下单咨询都没有，还收到几个香港中文用户转来的留言吐槽：“这个英文按钮一会是trolley一会是cart，汉服标的Hanfu连个小注解都没有，一开始...</span>
</a>
</li> </ul>
</div>
<div class="widget widget_previous">
<div class="title">最新文章</div>
<ul>
<li>
<a href="https://www.codeqd.com/post/20261022129.html" target="_blank" title="Vue3动态组件怎么用才不踩坑？缓存、传参、类型全搞定">Vue3动态组件怎么用才不踩坑？缓存、传参、类型全搞定</a>
<span>2小时前</span>
</li> <li>
<a href="https://www.codeqd.com/post/20261022128.html" target="_blank" title="Vue3的diff算法是怎么工作的？和Vue2有什么本质区别？">Vue3的diff算法是怎么工作的？和Vue2有什么本质区别？</a>
<span>8小时前</span>
</li> <li>
<a href="https://www.codeqd.com/post/20261022127.html" target="_blank" title="Vue3 defineExpose到底是啥？怎么用？为啥子ref拿到子组件是空对象？">Vue3 defineExpose到底是啥？怎么用？为啥子ref拿到子组件是空对象？</a>
<span>19小时前</span>
</li> <li>
<a href="https://www.codeqd.com/post/20261022126.html" target="_blank" title="Vue3的生命周期钩子函数都有啥 具体怎么用">Vue3的生命周期钩子函数都有啥 具体怎么用</a>
<span>1天前</span>
</li> <li>
<a href="https://www.codeqd.com/post/20261022125.html" target="_blank" title="刚转Vue3就卡壳？defineComponent到底是不是必须用？">刚转Vue3就卡壳？defineComponent到底是不是必须用？</a>
<span>1天前</span>
</li> <li>
<a href="https://www.codeqd.com/post/20261022124.html" target="_blank" title="Vue3 setup语法糖中除了props emits还能配啥？defineOptions的100%实用干货汇总">Vue3 setup语法糖中除了props emits还能配啥？defineOptions的100%实用干货汇总</a>
<span>2天前</span>
</li> <li>
<a href="https://www.codeqd.com/post/20261022123.html" target="_blank" title="Vue3 Draggable怎么实现拖拽排序、跨组件、虚拟列表三大场景？常见报错怎么解决？">Vue3 Draggable怎么实现拖拽排序、跨组件、虚拟列表三大场景？常见报错怎么解决？</a>
<span>2天前</span>
</li> <li>
<a href="https://www.codeqd.com/post/20261022122.html" target="_blank" title="Vue3开发里父组件怎么调用子组件方法？这3种实用方案教你避坑">Vue3开发里父组件怎么调用子组件方法？这3种实用方案教你避坑</a>
<span>2天前</span>
</li> <li>
<a href="https://www.codeqd.com/post/20261022121.html" target="_blank" title="做Vue3项目要不要用专门的动画库？哪个更适合小白+进阶开发者？">做Vue3项目要不要用专门的动画库？哪个更适合小白+进阶开发者？</a>
<span>3天前</span>
</li> <li>
<a href="https://www.codeqd.com/post/20261022120.html" target="_blank" title="Vue3自定义指令用在哪？怎么比组件更轻量高效？新手也能快速上手吗？">Vue3自定义指令用在哪？怎么比组件更轻量高效？新手也能快速上手吗？</a>
<span>3天前</span>
</li> </ul>
</div>
<div class="widget widget_tags">
<div class="title">标签列表</div> <ul><li><a target="_blank" href="https://www.codeqd.com/tags/PHP/">PHP</a></li><li><a target="_blank" href="https://www.codeqd.com/tags/PHP%20microtime/">PHP microtime</a></li><li><a target="_blank" href="https://www.codeqd.com/tags/Mysql/">Mysql</a></li><li><a target="_blank" href="https://www.codeqd.com/tags/PHP%20dirname%28%29/">PHP dirname()</a></li><li><a target="_blank" href="https://www.codeqd.com/tags/PHP%20Select/">PHP Select</a></li><li><a target="_blank" href="https://www.codeqd.com/tags/str_replace%E5%87%BD%E6%95%B0/">str_replace函数</a></li><li><a target="_blank" href="https://www.codeqd.com/tags/sscanf%E5%87%BD%E6%95%B0/">sscanf函数</a></li><li><a target="_blank" href="https://www.codeqd.com/tags/PHP%E7%9A%84Explode%E5%87%BD%E6%95%B0/">PHP的Explode函数</a></li><li><a target="_blank" href="https://www.codeqd.com/tags/PHP%20sort/">PHP sort</a></li><li><a target="_blank" href="https://www.codeqd.com/tags/in_array%28%29/">in_array()</a></li><li><a target="_blank" href="https://www.codeqd.com/tags/addAttribute/">addAttribute</a></li><li><a target="_blank" href="https://www.codeqd.com/tags/MD5%E5%80%BC/">MD5值</a></li><li><a target="_blank" href="https://www.codeqd.com/tags/PHP%E5%B7%A5%E7%A8%8B%E5%B8%88/">PHP工程师</a></li><li><a target="_blank" href="https://www.codeqd.com/tags/PHP%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F/">PHP正则表达式</a></li><li><a target="_blank" href="https://www.codeqd.com/tags/PHP%20Date%28%29/">PHP Date()</a></li><li><a target="_blank" href="https://www.codeqd.com/tags/%E6%95%B0%E6%8D%AE%E5%BA%93/">数据库</a></li><li><a target="_blank" href="https://www.codeqd.com/tags/php%E8%BF%9E%E6%8E%A5mysql/">php连接mysql</a></li><li><a target="_blank" href="https://www.codeqd.com/tags/phpmysql/">phpmysql</a></li><li><a target="_blank" href="https://www.codeqd.com/tags/mybatis/">mybatis</a></li><li><a target="_blank" href="https://www.codeqd.com/tags/jsp%E8%BF%9E%E6%8E%A5mysql/">jsp连接mysql</a></li><li><a target="_blank" href="https://www.codeqd.com/tags/navicatmysqllinux/">navicatmysqllinux</a></li><li><a target="_blank" href="https://www.codeqd.com/tags/MySQL%20Workbench/">MySQL Workbench</a></li><li><a target="_blank" href="https://www.codeqd.com/tags/MySQL%E6%95%B0%E6%8D%AE%E5%BA%93/">MySQL数据库</a></li><li><a target="_blank" href="https://www.codeqd.com/tags/mysql%20cte/">mysql cte</a></li><li><a target="_blank" href="https://www.codeqd.com/tags/Linux/">Linux</a></li></ul>
</div>
</div></div> <div class="footer">
<div class="container">Copyright by <a href="/">code前端网</a> All Rights Reserved.<a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener">粤ICP备12067512号-4</a>
<p style="display:none;"> Powered By <a href="https://www.zblogcn.com/" title="Z-BlogPHP 1.7.5 Build 173540" target="_blank" rel="noopener noreferrer">Z-BlogPHP</a> Theme By <a href="https://www.htmlit.com.cn/" target="_blank">编程老白</a></p></div>
</div><div id="goTop" class="goTop"><i class="fa fa-angle-up"></i></div><script src="https://www.codeqd.com/zb_users/theme/yd1125free/script/common.js?v=1.2.4" type="text/javascript"></script>
<script src="https://www.codeqd.com/zb_users/theme/yd1125free/script/custom.js?v=1.2.4" type="text/javascript"></script>
<script>jQuery(document).ready(function($) {jQuery('.main_left').theiaStickySidebar({ additionalMarginTop: 10,});});</script><script src="https://www.codeqd.com/zb_users/plugin/YtUser/style/js/frontend.js"></script>
<script src="https://www.codeqd.com/zb_users/plugin/FY_Prettify/prettify.js" type="text/javascript"></script>
<script type="text/javascript">var zbPath="https://www.codeqd.com/", codeAll = 0, copyRights = 1, copyTips = "本段代码来自 ", codeText = 0, textHeight = 200, sButton = "0|0|0|0", codeFold = 0; document.writeln(unescape("%3Cscript src=\""+zbPath+"zb_users/plugin/Codemo_vip/js/main.js?v=3.3.0\" type=\"text/javascript\"%3E%3C/script%3E"));</script>
</body>
</html>
<!--65.87 ms , 20 queries , 4835kb memory , 2 errors--> 
code前端网