一、前言
当开发者在开发网站时，希望用户能够更好地找到自己制作的网站，并且在搜索引擎中排名更高。在这种情况下，搜索引擎优化（SEO）就显得至关重要。SEO可以通过设置一些比如标签、
标签、标签等来完成。</p><h3><span
class=ez-toc-section id=25E425BA258C25E325802581Vue325E825B725AF25E7259425B125E625A6258225E825BF25B0></span>二、Vue3路由概述<span
class=ez-toc-section-end></span></h3><p>Vue3是Vue.js的最新版本，它是一种渐进式JavaScript框架，拥有多个功能，包括组件化、状态管理、路由等。Vue Router是Vue.js中的官方路由库，可以帮助我们在单页面应用程序中实现基于组件的导航。</p><p>路由可以让用户在浏览器中通过点击链接、输入URL等方式进行导航。路由跳转时可以通过导航守卫来实现一些逻辑控制。路由导航守卫是Vue Router提供的一个功能，可以在路由切换时进行控制。本文将主要介绍如何在Vue3中使用路由导航守卫的功能来设置附加SEO元素。</p><h3><span
class=ez-toc-section id=25E425B8258925E32580258125E825AE25BE25E725BD25AE25E725BD259125E925A125B525E625A0258725E925A2259825E625A0258725E725AD25BE></span>三、设置网页标题<title>标签<span
class=ez-toc-section-end></span></h3><p>标题（title）标签是网页优化的基础，可以告诉搜索引擎要显示的信息和网页的主要内容。在Vue3中，需要使用路由导航守卫中的beforeEach方法。这个方法会在每个路由切换之前调用。</p><pre>
import { createRouter, createWebHistory } from 'vue-router'
const router = createRouter({
history: createWebHistory(),
routes: [...]
})
router.beforeEach((to, from, next) => {
document.title = to.meta.title
next()
})
</pre><p>上面的代码中，我们在beforeEach方法中设置了document.title值为to.meta.title。这里的to表示要跳转的路由信息，通过它能够访问到meta中的title属性。接下来在每个路由配置的meta中加入title字段即可。</p><pre>
const router = createRouter({
routes: [
{
path: '/',
name: 'Home',
component: Home,
meta: {
title: '网站首页'
}
},
...
]
})
</pre><h3><span
class=ez-toc-section id=25E5259B259B25E32580258125E825AE25BE25E725BD25AEmeta25E625A0258725E725AD25BE></span>四、设置meta标签<span
class=ez-toc-section-end></span></h3><p>在Vue3中，设置meta标签也可以通过使用路由导航守卫的方法beforeEach完成。可以将meta信息存储在路由配置中，然后在跳转时将其添加到网页头部中。</p><pre>
router.beforeEach((to, from, next) => {
const head = document.getElementsByTagName('head')[0]
const meta = document.createElement('meta')
meta.content = to.meta.description || '这是一个Vue3应用程序'
meta.name = 'description'
head.appendChild(meta)
next()
})
</pre><p>上述代码中，在beforeEach方法中，我们首先获取了head元素，然后创建了一个meta元素，并且将to.meta.description属性的值设置为了content。最后，将新的meta元素添加到head元素中。如下是路由配置中meta标签的设置：</p><pre>
const router = createRouter({
routes: [
{
path: '/',
name: 'Home',
component: Home,
meta: {
title: '网站首页',
description: '这是一个Vue3应用程序'
}
},
...
]
})
</pre><h3><span
class=ez-toc-section id=25E425BA259425E32580258125E825AE25BE25E725BD25AElink25E625A0258725E725AD25BE></span>五、设置link标签<span
class=ez-toc-section-end></span></h3><p>Link标签是一种较为复杂的meta标签，主要用于网站图标、样式表等。在Vue3中，设置Link标签也可以通过使用路由导航守卫的方法beforeEach完成。</p><pre>
router.beforeEach((to, from, next) => {
const head = document.getElementsByTagName('head')[0]
const favicon = document.querySelector('link[rel="icon"]')
favicon.href = to.meta.icon || 'https://static.506064.com/favicon.ico'
if (!favicon) {
const link = document.createElement('link')
link.href = to.meta.icon || 'https://static.506064.com/favicon.ico'
link.rel = 'icon'
head.appendChild(link)
}
next()
})
</pre><p>在上述代码中，我们首先获取了head元素和当前网站的favicon。如果favicon不存在，我们就创建了一个link元素，并且将to.meta.icon属性的值设置为href，并且将rel属性设置为icon。接着我们将新link元素添加到head元素中。如下是路由配置中link标签的设置：</p><pre>
const router = createRouter({
routes: [
{
path: '/',
name: 'Home',
component: Home,
meta: {
title: '网站首页',
description: '这是一个Vue3应用程序',
icon: 'https://static.506064.com/favicon.ico'
}
},
...
]
})
</pre><h3><span
class=ez-toc-section id=25E5258525AD25E32580258125E525B0258F25E725BB2593></span>六、小结<span
class=ez-toc-section-end></span></h3><p>通过本文的介绍，我们可以了解如何在Vue3中使用路由导航守卫的功能来设置附加SEO元素。包括设置<title>标签、标签、标签等。这些元素都可以对网站的优化起到重要的作用。</p><div
class=entry-readmore><div
class=entry-readmore-btn></div></div><div
class=entry-copyright><p>原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/207011.html</p></div></div><div
class=entry-tag><a
href=https://www.506064.com/n/tag/yuansu rel=tag>元素</a><a
href=https://www.506064.com/n/tag/ruhezai rel=tag>如何在</a><a
href=https://www.506064.com/n/tag/wangye rel=tag>网页</a><a
href=https://www.506064.com/n/tag/luyou rel=tag>路由</a></div><div
class=entry-action><div
class=btn-zan data-id=207011><i
class="wpcom-icon wi"><svg
aria-hidden=true><use
xlink:href=#wi-thumb-up-fill></use></svg></i> 赞 <span
class=entry-action-num>(0)</span></div><div
class=btn-dashang>
<i
class="wpcom-icon wi"><svg
aria-hidden=true><use
xlink:href=#wi-cny-circle-fill></use></svg></i> 打赏 <span
class="dashang-img dashang-img2">
<span>
<img
src=//static.506064.com/wp-content/uploads/2024/12/2024121004124055.png alt=微信扫一扫>
微信扫一扫 </span>
<span>
<img
src=//static.506064.com/wp-content/uploads/2024/12/2024121004113670.png alt=支付宝扫一扫>
支付宝扫一扫 </span>
</span></div></div><div
class=entry-bar><div
class=entry-bar-inner><div
class=entry-bar-author>
<a
data-user=22595 target=_blank href=https://www.506064.com/spacehome/f08e84c43f class="avatar j-user-card">
<img
alt=小蓝的头像 src=//static.506064.com/wp-content/uploads/2024/11/none.jpg class='avatar avatar-60 photo' height=60 width=60><span
class=author-name>小蓝</span> </a></div><div
class=entry-bar-info><div
class="info-item meta">
<a
class="meta-item j-heart" href=javascript:; data-id=207011><i
class="wpcom-icon wi"><svg
aria-hidden=true><use
xlink:href=#wi-star></use></svg></i> <span
class=data>0</span></a> <a
class=meta-item href=#comments><i
class="wpcom-icon wi"><svg
aria-hidden=true><use
xlink:href=#wi-comment></use></svg></i> <span
class=data>0</span></a></div><div
class="info-item share">
<a
class="meta-item mobile j-mobile-share" href=javascript:; data-id=207011 data-qrcode=https://www.506064.com/n/207011.html><i
class="wpcom-icon wi"><svg
aria-hidden=true><use
xlink:href=#wi-share></use></svg></i> 生成海报</a>
<a
class="meta-item wechat" data-share=wechat target=_blank rel=nofollow href=#>
<i
class="wpcom-icon wi"><svg
aria-hidden=true><use
xlink:href=#wi-wechat></use></svg></i> </a>
<a
class="meta-item weibo" data-share=weibo target=_blank rel=nofollow href=#>
<i
class="wpcom-icon wi"><svg
aria-hidden=true><use
xlink:href=#wi-weibo></use></svg></i> </a>
<a
class="meta-item qq" data-share=qq target=_blank rel=nofollow href=#>
<i
class="wpcom-icon wi"><svg
aria-hidden=true><use
xlink:href=#wi-qq></use></svg></i> </a></div><div
class="info-item act">
<a
href=javascript:; id=j-reading><i
class="wpcom-icon wi"><svg
aria-hidden=true><use
xlink:href=#wi-article></use></svg></i></a></div></div></div></div></div><div
class=entry-page><div
class="entry-page-prev entry-page-nobg">
<a
href=https://www.506064.com/n/206987.html title=如何使用dim函数提高网页的可访问性和用户体验 rel=prev>
<span>如何使用dim函数提高网页的可访问性和用户体验</span>
</a><div
class=entry-page-info>
<span
class=pull-left><i
class="wpcom-icon wi"><svg
aria-hidden=true><use
xlink:href=#wi-arrow-left-double></use></svg></i> 上一篇</span>
<span
class=pull-right>2024-12-08 14:19</span></div></div><div
class="entry-page-next entry-page-nobg">
<a
href=https://www.506064.com/n/207012.html title=如何成功安装cv2库 rel=next>
<span>如何成功安装cv2库</span>
</a><div
class=entry-page-info>
<span
class=pull-right>下一篇 <i
class="wpcom-icon wi"><svg
aria-hidden=true><use
xlink:href=#wi-arrow-right-double></use></svg></i></span>
<span
class=pull-left>2024-12-08 14:19</span></div></div></div><div
class=entry-related-posts><h3 class="entry-related-title">相关推荐</h3><ul
class="entry-related cols-3 post-loop post-loop-default"><li
class="item item-no-thumb"><div
class=item-content><h3 class="item-title">
<a
href=https://www.506064.com/n/375630.html target=_blank rel=bookmark>
如何在PyCharm中安装OpenCV？ </a></h3><div
class=item-excerpt><p>本文将从以下几个方面详细介绍如何在PyCharm中安装OpenCV。 一、安装Python 在安装OpenCV之前，请确保已经安装了Python。 如果您还没有安装Python，可…</p></div><div
class=item-meta><div
class="item-meta-li author">
<a
data-user=48144 target=_blank href=https://www.506064.com/spacehome/lxehw class="avatar j-user-card">
<img
alt=LXEHW的头像 src=//static.506064.com/wp-content/uploads/2024/11/none.jpg class='avatar avatar-60 photo' height=60 width=60> <span>LXEHW</span>
</a></div>
<a
class="item-meta-li category" href=https://www.506064.com/n/category/code target=_blank>编程</a>
<span
class="item-meta-li date">2025-04-29</span><div
class=item-meta-right></div></div></div>
</li>
<li
class="item item-no-thumb"><div
class=item-content><h3 class="item-title">
<a
href=https://www.506064.com/n/375566.html target=_blank rel=bookmark>
如何在Python中实现平方运算？ </a></h3><div
class=item-excerpt><p>在Python中，平方运算是常见的数学运算之一。本文将从多个方面详细阐述如何在Python中实现平方运算。 一、使用乘法运算实现平方 平方运算就是一个数乘以自己，因此可以使用乘法运…</p></div><div
class=item-meta><div
class="item-meta-li author">
<a
data-user=48080 target=_blank href=https://www.506064.com/spacehome/jkpcr class="avatar j-user-card">
<img
alt=JKPCR的头像 src=//static.506064.com/wp-content/uploads/2024/11/none.jpg class='avatar avatar-60 photo' height=60 width=60> <span>JKPCR</span>
</a></div>
<a
class="item-meta-li category" href=https://www.506064.com/n/category/code target=_blank>编程</a>
<span
class="item-meta-li date">2025-04-29</span><div
class=item-meta-right></div></div></div>
</li>
<li
class="item item-no-thumb"><div
class=item-content><h3 class="item-title">
<a
href=https://www.506064.com/n/375470.html target=_blank rel=bookmark>
如何在树莓派上安装Windows 7系统？ </a></h3><div
class=item-excerpt><p>随着树莓派的普及，许多用户想在树莓派上安装Windows 7操作系统。 一、准备工作 在开始之前，需要准备以下材料: 1.树莓派4B一台； 2.一张8GB以上的SD卡； 3.下载并…</p></div><div
class=item-meta><div
class="item-meta-li author">
<a
data-user=47984 target=_blank href=https://www.506064.com/spacehome/ifjjy class="avatar j-user-card">
<img
alt=IFJJY的头像 src=//static.506064.com/wp-content/uploads/2024/11/none.jpg class='avatar avatar-60 photo' height=60 width=60> <span>IFJJY</span>
</a></div>
<a
class="item-meta-li category" href=https://www.506064.com/n/category/code target=_blank>编程</a>
<span
class="item-meta-li date">2025-04-29</span><div
class=item-meta-right></div></div></div>
</li>
<li
class="item item-no-thumb"><div
class=item-content><h3 class="item-title">
<a
href=https://www.506064.com/n/375466.html target=_blank rel=bookmark>
如何在Python中找出所有的三位水仙花数 </a></h3><div
class=item-excerpt><p>本文将介绍如何使用Python语言编写程序，找出所有的三位水仙花数。 一、什么是水仙花数 水仙花数也称为自恋数，是指一个n位数（n≥3），其各位数字的n次方和等于该数本身。例如，1…</p></div><div
class=item-meta><div
class="item-meta-li author">
<a
data-user=47980 target=_blank href=https://www.506064.com/spacehome/ivpbf class="avatar j-user-card">
<img
alt=IVPBF的头像 src=//static.506064.com/wp-content/uploads/2024/11/none.jpg class='avatar avatar-60 photo' height=60 width=60> <span>IVPBF</span>
</a></div>
<a
class="item-meta-li category" href=https://www.506064.com/n/category/code target=_blank>编程</a>
<span
class="item-meta-li date">2025-04-29</span><div
class=item-meta-right></div></div></div>
</li>
<li
class="item item-no-thumb"><div
class=item-content><h3 class="item-title">
<a
href=https://www.506064.com/n/375478.html target=_blank rel=bookmark>
Python遍历集合中的元素 </a></h3><div
class=item-excerpt><p>本文将从多个方面详细阐述Python遍历集合中的元素方法。 一、for循环遍历集合 Python中，使用for循环可以遍历集合中的每个元素，代码如下： my_set = {1, 2…</p></div><div
class=item-meta><div
class="item-meta-li author">
<a
data-user=47992 target=_blank href=https://www.506064.com/spacehome/rtwsy class="avatar j-user-card">
<img
alt=RTWSY的头像 src=//static.506064.com/wp-content/uploads/2024/11/none.jpg class='avatar avatar-60 photo' height=60 width=60> <span>RTWSY</span>
</a></div>
<a
class="item-meta-li category" href=https://www.506064.com/n/category/code target=_blank>编程</a>
<span
class="item-meta-li date">2025-04-29</span><div
class=item-meta-right></div></div></div>
</li>
<li
class="item item-no-thumb"><div
class=item-content><h3 class="item-title">
<a
href=https://www.506064.com/n/375319.html target=_blank rel=bookmark>
Python列表中大于某数的元素处理方法 </a></h3><div
class=item-excerpt><p>本文将会介绍如何在Python列表中找到大于某数的元素，并对其进行进一步的处理。 一、查找大于某数的元素 要查找Python列表中大于某数的元素，可以使用列表推导式进行处理。 nu…</p></div><div
class=item-meta><div
class="item-meta-li author">
<a
data-user=47833 target=_blank href=https://www.506064.com/spacehome/verkj class="avatar j-user-card">
<img
alt=VERKJ的头像 src=//static.506064.com/wp-content/uploads/2024/11/none.jpg class='avatar avatar-60 photo' height=60 width=60> <span>VERKJ</span>
</a></div>
<a
class="item-meta-li category" href=https://www.506064.com/n/category/code target=_blank>编程</a>
<span
class="item-meta-li date">2025-04-29</span><div
class=item-meta-right></div></div></div>
</li>
<li
class="item item-no-thumb"><div
class=item-content><h3 class="item-title">
<a
href=https://www.506064.com/n/375311.html target=_blank rel=bookmark>
Python Set元素用法介绍 </a></h3><div
class=item-excerpt><p>Set是Python编程语言中拥有一系列独特属性及特点的数据类型之一。它可以存储无序且唯一的数据元素，这使得Set在数据处理中非常有用。Set能够进行交、并、差集等操作，也可以用于…</p></div><div
class=item-meta><div
class="item-meta-li author">
<a
data-user=47825 target=_blank href=https://www.506064.com/spacehome/apcio class="avatar j-user-card">
<img
alt=APCIO的头像 src=//static.506064.com/wp-content/uploads/2024/11/none.jpg class='avatar avatar-60 photo' height=60 width=60> <span>APCIO</span>
</a></div>
<a
class="item-meta-li category" href=https://www.506064.com/n/category/code target=_blank>编程</a>
<span
class="item-meta-li date">2025-04-29</span><div
class=item-meta-right></div></div></div>
</li>
<li
class="item item-no-thumb"><div
class=item-content><h3 class="item-title">
<a
href=https://www.506064.com/n/375231.html target=_blank rel=bookmark>
如何在代码中打出正确的横杆 </a></h3><div
class=item-excerpt><p>在编程中，横杆是一个很常见的符号，但是有些人可能会在打横杆时出错。本文将从多个方面详细介绍如何在代码中打出正确的横杆。 一、正常使用横杆 在代码中，直接使用“-”即可打出横杆。例如…</p></div><div
class=item-meta><div
class="item-meta-li author">
<a
data-user=47745 target=_blank href=https://www.506064.com/spacehome/eoqrd class="avatar j-user-card">
<img
alt=EOQRD的头像 src=//static.506064.com/wp-content/uploads/2024/11/none.jpg class='avatar avatar-60 photo' height=60 width=60> <span>EOQRD</span>
</a></div>
<a
class="item-meta-li category" href=https://www.506064.com/n/category/code target=_blank>编程</a>
<span
class="item-meta-li date">2025-04-29</span><div
class=item-meta-right></div></div></div>
</li>
<li
class="item item-no-thumb"><div
class=item-content><h3 class="item-title">
<a
href=https://www.506064.com/n/375101.html target=_blank rel=bookmark>
Python编程实现列表元素逆序存放 </a></h3><div
class=item-excerpt><p>本文将从以下几个方面对Python编程实现列表元素逆序存放做详细阐述： 一、实现思路 一般来说，使用Python将列表元素逆序存放可以通过以下几个步骤实现： 1. 定义一个列表 2…</p></div><div
class=item-meta><div
class="item-meta-li author">
<a
data-user=47615 target=_blank href=https://www.506064.com/spacehome/ddlvi class="avatar j-user-card">
<img
alt=DDLVI的头像 src=//static.506064.com/wp-content/uploads/2024/11/none.jpg class='avatar avatar-60 photo' height=60 width=60> <span>DDLVI</span>
</a></div>
<a
class="item-meta-li category" href=https://www.506064.com/n/category/code target=_blank>编程</a>
<span
class="item-meta-li date">2025-04-29</span><div
class=item-meta-right></div></div></div>
</li>
<li
class="item item-no-thumb"><div
class=item-content><h3 class="item-title">
<a
href=https://www.506064.com/n/375121.html target=_blank rel=bookmark>
Python集合加入元素 </a></h3><div
class=item-excerpt><p>Python中的集合是一种无序且元素唯一的集合类型。集合中的元素可以是数字、字符串、甚至是其他集合类型。在本文中，我们将从多个方面来探讨如何向Python集合中加入元素。 一、使用…</p></div><div
class=item-meta><div
class="item-meta-li author">
<a
data-user=47635 target=_blank href=https://www.506064.com/spacehome/buker class="avatar j-user-card">
<img
alt=BUKER的头像 src=//static.506064.com/wp-content/uploads/2024/11/none.jpg class='avatar avatar-60 photo' height=60 width=60> <span>BUKER</span>
</a></div>
<a
class="item-meta-li category" href=https://www.506064.com/n/category/code target=_blank>编程</a>
<span
class="item-meta-li date">2025-04-29</span><div
class=item-meta-right></div></div></div>
</li></ul></div><div
id=comments class=entry-comments><div
id=respond class=comment-respond><h3 id="reply-title" class="comment-reply-title">发表回复 <small><a
rel=nofollow id=cancel-comment-reply-link href=/n/207011.html#respond style=display:none;><i
class="wpcom-icon wi"><svg
aria-hidden=true><use
xlink:href=#wi-close></use></svg></i></a></small></h3><div
class=comment-form><div
class=comment-must-login>请登录后评论...</div><div
class=form-submit><div
class="form-submit-text pull-left"><a
href=https://www.506064.com/login>登录</a>后才能评论</div> <button
name=submit type=submit id=must-submit class="wpcom-btn btn-primary btn-xs submit">提交</button></div></div></div></div></article></main><aside
class=sidebar><div
class="widget widget_profile"><div
class=profile-cover><img
class=j-lazy src=https://static.506064.com/wp-content/themes/justnews/themer/assets/images/lazy.png data-original=//static.506064.com/wp-content/uploads/2024/03/1617180342.jpg alt=小蓝></div><div
class=avatar-wrap>
<a
target=_blank href=https://www.506064.com/spacehome/f08e84c43f class=avatar-link><img
alt=小蓝的头像 src=//static.506064.com/wp-content/uploads/2024/11/none.jpg class='avatar avatar-120 photo' height=120 width=120></a></div><div
class=profile-info>
<a
target=_blank href=https://www.506064.com/spacehome/f08e84c43f class=profile-name><span
class=author-name>小蓝</span></a><p
class=author-description>这个人很懒，什么都没有留下～</p><div
class=profile-stats><div
class=profile-stats-inner><div
class=user-stats-item>
<b>75.5K</b>
<span>文章</span></div><div
class=user-stats-item>
<b>0</b>
<span>评论</span></div><div
class=user-stats-item>
<b>0</b>
<span>粉丝</span></div></div></div>
<button
type=button class="wpcom-btn btn-xs btn-follow j-follow btn-primary" data-user=22595><i
class="wpcom-icon wi"><svg
aria-hidden=true><use
xlink:href=#wi-add></use></svg></i>关注</button><button
type=button class="wpcom-btn btn-primary btn-xs btn-message j-message" data-user=22595><i
class="wpcom-icon wi"><svg
aria-hidden=true><use
xlink:href=#wi-mail-fill></use></svg></i>私信</button></div><div
class=profile-posts><h3 class="widget-title"><span>最近文章</span></h3><ul> <li><a
href=https://www.506064.com/n/313016.html title=探究request.session()>探究request.session()</a></li>
<li><a
href=https://www.506064.com/n/313015.html title=深入浅出JS解构赋值>深入浅出JS解构赋值</a></li>
<li><a
href=https://www.506064.com/n/313014.html title=Python函数编写：提高代码模块性和重复利用性>Python函数编写：提高代码模块性和重复利用性</a></li>
<li><a
href=https://www.506064.com/n/313013.html title=javajson聚合（java组合和聚合）>javajson聚合（java组合和聚合）</a></li>
<li><a
href=https://www.506064.com/n/313012.html title=mysql数据库中间表如何设计,mysql数据库表的设计>mysql数据库中间表如何设计,mysql数据库表的设计</a></li></ul></div></div><div
class="widget widget_wpcc"><h3 class="widget-title"><span>繁体</span></h3><div
id=wpcc_widget_inner>
<span
id=wpcc_original_link class=wpcc_current_lang ><a
class=wpcc_link href=https://www.506064.com/n/207011.html title=不转换>不转换</a></span>
<span
id=wpcc_zh-hant_link class=wpcc_lang ><a
class=wpcc_link rel=nofollow href=https://www.506064.com/zh-hant/n/207011.html title=繁體中文 >繁體中文</a></span>
<span
id=wpcc_zh-hk_link class=wpcc_lang ><a
class=wpcc_link rel=nofollow href=https://www.506064.com/zh-hk/n/207011.html title=港澳繁體 >港澳繁體</a></span>
<span
id=wpcc_zh-tw_link class=wpcc_lang ><a
class=wpcc_link rel=nofollow href=https://www.506064.com/zh-tw/n/207011.html title=台灣正體 >台灣正體</a></span></div></div><div
class="widget widget-area widget-ez_toc_sticky"><div
id=ez-toc-widget-sticky-container class="ez-toc-widget-sticky-container ez-toc-widget-sticky-container-ez_toc_widget_sticky-2 ez-toc-widget-sticky-v2_0_73 ez-toc-widget-sticky counter-hierarchy ez-toc-widget-sticky-container ez-toc-widget-sticky-direction"><h3 class="widget-title"><span>
<span
class=ez-toc-widget-sticky-title-container><style>#ez_toc_widget_sticky-2 .ez-toc-widget-sticky-title , .ez-toc-widget-sticky-container-ez_toc_widget_sticky-2 .ez-toc-widget-sticky-title {
font-size: 120%;
font-weight: 500;
color: #000;
}
#ez_toc_widget_sticky-2 .ez-toc-widget-sticky-list li a , .ez-toc-widget-sticky-container-ez_toc_widget_sticky-2 .ez-toc-widget-sticky-list li a{
;
;
;
}
#ez_toc_widget_sticky-2 .ez-toc-widget-sticky-container ul.ez-toc-widget-sticky-list li.active , .ez-toc-widget-sticky-container-ez_toc_widget_sticky-2 ul.ez-toc-widget-sticky-list li.active{
background-color: #ededed;
}</style><span
class=ez-toc-widget-sticky-title-toggle><span
class="ez-toc-widget-sticky-title ez-toc-toggle" style="cursor: pointer">文章目录</span><a
href=# class="ez-toc-widget-sticky-pull-right ez-toc-widget-sticky-btn ez-toc-widget-sticky-btn-xs ez-toc-widget-sticky-btn-default ez-toc-widget-sticky-toggle" aria-label="Widget Easy TOC toggle icon"><span
style="border: 0;padding: 0;margin: 0;position: absolute !important;height: 1px;width: 1px;overflow: hidden;clip: rect(1px 1px 1px 1px);clip: rect(1px, 1px, 1px, 1px);clip-path: inset(50%);white-space: nowrap;">Toggle Table of Content</span><span
class><span
class=eztoc-hide style=display:none;>Toggle</span><span
class=ez-toc-icon-toggle-span><svg
style="fill: #999;color:#999" xmlns=http://www.w3.org/2000/svg class=list-377408 width=20px height=20px viewBox="0 0 24 24" fill=none><path
d="M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z" fill=currentColor></path></svg><svg
style="fill: #999;color:#999" class=arrow-unsorted-368013 xmlns=http://www.w3.org/2000/svg width=10px height=10px viewBox="0 0 24 24" version=1.2 baseProfile=tiny><path
d="M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z"/></svg></span></span></a></span>
</span></span></h3><nav><ul
class='ez-toc-widget-sticky-list ez-toc-widget-sticky-list-level-1 ' ><li
class='ez-toc-widget-sticky-page-1 ez-toc-widget-sticky-heading-level-3'><a
class="ez-toc-link ez-toc-heading-1" href=#25E425B8258025E32580258125E52589258D25E825A82580 title=一、前言>一、前言</a></li><li
class='ez-toc-widget-sticky-page-1 ez-toc-widget-sticky-heading-level-3'><a
class="ez-toc-link ez-toc-heading-2" href=#25E425BA258C25E325802581Vue325E825B725AF25E7259425B125E625A6258225E825BF25B0 title=二、Vue3路由概述>二、Vue3路由概述</a></li><li
class='ez-toc-widget-sticky-page-1 ez-toc-widget-sticky-heading-level-3'><a
class="ez-toc-link ez-toc-heading-3" href=#25E425B8258925E32580258125E825AE25BE25E725BD25AE25E725BD259125E925A125B525E625A0258725E925A2259825E625A0258725E725AD25BE title=三、设置网页标题标签>三、设置网页标题标签</a></li><li
class='ez-toc-widget-sticky-page-1 ez-toc-widget-sticky-heading-level-3'><a
class="ez-toc-link ez-toc-heading-4" href=#25E5259B259B25E32580258125E825AE25BE25E725BD25AEmeta25E625A0258725E725AD25BE title=四、设置meta标签>四、设置meta标签</a></li><li
class='ez-toc-widget-sticky-page-1 ez-toc-widget-sticky-heading-level-3'><a
class="ez-toc-link ez-toc-heading-5" href=#25E425BA259425E32580258125E825AE25BE25E725BD25AElink25E625A0258725E725AD25BE title=五、设置link标签>五、设置link标签</a></li><li
class='ez-toc-widget-sticky-page-1 ez-toc-widget-sticky-heading-level-3'><a
class="ez-toc-link ez-toc-heading-6" href=#25E5258525AD25E32580258125E525B0258F25E725BB2593 title=六、小结>六、小结</a></li></ul></nav></div></div><div
class="widget widget_lastest_products"><h3 class="widget-title"><span>可能喜欢</span></h3><ul
class=p-list>
<li
class="col-xs-24 col-md-12 p-item"><div
class=p-item-wrap>
<a
class=thumb href=https://www.506064.com/n/151811.html>
<img
width=480 height=300 src=https://static.506064.com/wp-content/themes/justnews/themer/assets/images/lazy.png class="attachment-default size-default wp-post-image j-lazy" alt="4核8G云服务器适合装宝塔MySQL 那个版本" decoding=async data-original=https://static.506064.com/wp-content/uploads/2024/11/mysql-480x300.jpg> </a><h4 class="title">
<a
href=https://www.506064.com/n/151811.html title="4核8G云服务器适合装宝塔MySQL 那个版本">
4核8G云服务器适合装宝塔MySQL 那个版本 </a></h4></div>
</li>
<li
class="col-xs-24 col-md-12 p-item"><div
class=p-item-wrap>
<a
class=thumb href=https://www.506064.com/n/117551.html>
<img
width=480 height=300 src=https://static.506064.com/wp-content/themes/justnews/themer/assets/images/lazy.png class="attachment-default size-default wp-post-image j-lazy" alt=字节跳动旗下豆包AI编程助手MarsCode拉新活动：京东E卡 decoding=async data-original=https://static.506064.com/wp-content/uploads/2024/08/image-480x300.png> </a><h4 class="title">
<a
href=https://www.506064.com/n/117551.html title=字节跳动旗下豆包AI编程助手MarsCode拉新活动：京东E卡>
字节跳动旗下豆包AI编程助手MarsCode拉新活动：京东E卡 </a></h4></div>
</li>
<li
class="col-xs-24 col-md-12 p-item"><div
class=p-item-wrap>
<a
class=thumb href=https://www.506064.com/n/2544.html>
<img
width=480 height=300 src=https://static.506064.com/wp-content/themes/justnews/themer/assets/images/lazy.png class="attachment-default size-default wp-post-image j-lazy" alt=哪个文件是剪映字幕文件？ decoding=async data-original=https://static.506064.com/wp-content/uploads/2024/03/jy_which_file-480x300.jpg> </a><h4 class="title">
<a
href=https://www.506064.com/n/2544.html title=哪个文件是剪映字幕文件？>
哪个文件是剪映字幕文件？ </a></h4></div>
</li>
<li
class="col-xs-24 col-md-12 p-item"><div
class=p-item-wrap>
<a
class=thumb href=https://www.506064.com/n/125944.html>
<img
width=480 height=300 src=https://static.506064.com/wp-content/themes/justnews/themer/assets/images/lazy.png class="attachment-default size-default wp-post-image j-lazy" alt="AI Logo 制作工具 LogoAI.ai，快速生成高质量 Logo" decoding=async data-original=https://static.506064.com/wp-content/uploads/2024/09/1725603329861slvpz89t-480x300.png> </a><h4 class="title">
<a
href=https://www.506064.com/n/125944.html title="AI Logo 制作工具 LogoAI.ai，快速生成高质量 Logo">
AI Logo 制作工具 LogoAI.ai，快速生成高质量 Logo </a></h4></div>
</li>
<li
class="col-xs-24 col-md-12 p-item"><div
class=p-item-wrap>
<a
class=thumb href=https://www.506064.com/n/217.html>
<img
width=480 height=300 src=https://static.506064.com/wp-content/themes/justnews/themer/assets/images/lazy.png class="attachment-default size-default wp-post-image j-lazy" alt=Epic免费领游戏：荒野的召唤：垂钓者+无敌少侠：原子伊芙 decoding=async data-original=https://static.506064.com/wp-content/uploads/2024/03/Epic-480x300.png> </a><h4 class="title">
<a
href=https://www.506064.com/n/217.html title=Epic免费领游戏：荒野的召唤：垂钓者+无敌少侠：原子伊芙>
Epic免费领游戏：荒野的召唤：垂钓者+无敌少侠：原子伊芙 </a></h4></div>
</li>
<li
class="col-xs-24 col-md-12 p-item"><div
class=p-item-wrap>
<a
class=thumb href=https://www.506064.com/n/143381.html>
<img
width=480 height=300 src=https://static.506064.com/wp-content/themes/justnews/themer/assets/images/lazy.png class="attachment-default size-default wp-post-image j-lazy" alt="提升敲命令体验的 Raycast 插件：快命令" decoding=async data-original=https://static.506064.com/wp-content/uploads/2024/10/97d9ad6abf3fb4da-480x300.jpg> </a><h4 class="title">
<a
href=https://www.506064.com/n/143381.html title="提升敲命令体验的 Raycast 插件：快命令">
提升敲命令体验的 Raycast 插件：快命令 </a></h4></div>
</li>
<li
class="col-xs-24 col-md-12 p-item"><div
class=p-item-wrap>
<a
class=thumb href=https://www.506064.com/n/2540.html>
<img
width=480 height=300 src=https://static.506064.com/wp-content/themes/justnews/themer/assets/images/lazy.png class="attachment-default size-default wp-post-image j-lazy" alt=剪映识别的字幕文件在哪里？ decoding=async data-original=https://static.506064.com/wp-content/uploads/2024/03/jy_zimu_location_yh-480x300.jpg> </a><h4 class="title">
<a
href=https://www.506064.com/n/2540.html title=剪映识别的字幕文件在哪里？>
剪映识别的字幕文件在哪里？ </a></h4></div>
</li>
<li
class="col-xs-24 col-md-12 p-item"><div
class=p-item-wrap>
<a
class=thumb href=https://www.506064.com/n/160107.html>
<img
width=480 height=300 src=https://static.506064.com/wp-content/themes/justnews/themer/assets/images/lazy.png class="attachment-default size-default wp-post-image j-lazy" alt="超过 3 万个公开可用的 IPTV 频道列表" decoding=async data-original=https://static.506064.com/wp-content/uploads/2024/11/image-21-480x300.png> </a><h4 class="title">
<a
href=https://www.506064.com/n/160107.html title="超过 3 万个公开可用的 IPTV 频道列表">
超过 3 万个公开可用的 IPTV 频道列表 </a></h4></div>
</li>
<li
class="col-xs-24 col-md-12 p-item"><div
class=p-item-wrap>
<a
class=thumb href=https://www.506064.com/n/6993.html>
<img
width=480 height=300 src=https://static.506064.com/wp-content/themes/justnews/themer/assets/images/lazy.png class="attachment-default size-default wp-post-image j-lazy" alt=「百度快速抓取2024年最新申请方法」使用说明与权益获取 decoding=async data-original=https://static.506064.com/wp-content/uploads/2024/04/070111713518646-480x300.png> </a><h4 class="title">
<a
href=https://www.506064.com/n/6993.html title=「百度快速抓取2024年最新申请方法」使用说明与权益获取>
「百度快速抓取2024年最新申请方法」使用说明与权益获取 </a></h4></div>
</li>
<li
class="col-xs-24 col-md-12 p-item"><div
class=p-item-wrap>
<a
class=thumb href=https://www.506064.com/n/7202.html>
<img
width=480 height=300 src=https://static.506064.com/wp-content/themes/justnews/themer/assets/images/lazy.png class="attachment-default size-default wp-post-image j-lazy" alt="一款去中心化的 YouTube 弹幕插件" decoding=async data-original=https://static.506064.com/wp-content/uploads/2024/05/danmakustr-480x300.png> </a><h4 class="title">
<a
href=https://www.506064.com/n/7202.html title="一款去中心化的 YouTube 弹幕插件">
一款去中心化的 YouTube 弹幕插件 </a></h4></div>
</li></ul></div></aside></div></div><footer
class=footer><div
class=container><div
class="footer-col-wrap footer-with-none"><div
class="footer-col footer-col-copy"><ul
class="footer-nav hidden-xs"><li
id=menu-item-2539 class="menu-item menu-item-2539"><a
href=/tools/base64/ >Base64编码解码</a></li>
<li
id=menu-item-2550 class="menu-item menu-item-2550"><a
href=/tools/jianying/ >剪映字幕导出工具</a></li>
<li
id=menu-item-2551 class="menu-item menu-item-2551"><a
href=/tools/jianying/srtdr.html>导入剪映字幕工具</a></li></ul><div
class=copyright><p>Copyright © 2024 简单一点 版权所有 <a
href=https://beian.miit.gov.cn target=_blank rel="nofollow noopener">滇ICP备2024022404号-1</a> Powered by 506064.Com</p></div></div></div></div></footer><div
class="action action-style-0 action-color-0 action-pos-0" style=bottom:20%;><div
class="action-item j-share">
<i
class="wpcom-icon wi action-item-icon"><svg
aria-hidden=true><use
xlink:href=#wi-share></use></svg></i></div><div
class="action-item gotop j-top">
<i
class="wpcom-icon wi action-item-icon"><svg
aria-hidden=true><use
xlink:href=#wi-arrow-up-2></use></svg></i></div></div> <script type=speculationrules>{"prefetch":[{"source":"document","where":{"and":[{"href_matches":"/*"},{"not":{"href_matches":["/wp-*.php","/wp-admin/*","https://static.506064.com/wp-content/uploads/*","/wp-content/*","/wp-content/plugins/*","/wp-content/themes/justnews/*","/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]}</script> <script id=main-js-extra>var _wpcom_js = {"webp":"?x-oss-process=image/format,webp","ajaxurl":"https://www.506064.com/wp-admin/admin-ajax.php","theme_url":"https://www.506064.com/wp-content/themes/justnews","slide_speed":"5000","is_admin":"0","lang":"zh_CN","js_lang":{"share_to":"\u5206\u4eab\u5230:","copy_done":"\u590d\u5236\u6210\u529f\uff01","copy_fail":"\u6d4f\u89c8\u5668\u6682\u4e0d\u652f\u6301\u62f7\u8d1d\u529f\u80fd","confirm":"\u786e\u5b9a","qrcode":"\u4e8c\u7ef4\u7801","page_loaded":"\u5df2\u7ecf\u5230\u5e95\u4e86","no_content":"\u6682\u65e0\u5185\u5bb9","load_failed":"\u52a0\u8f7d\u5931\u8d25\uff0c\u8bf7\u7a0d\u540e\u518d\u8bd5\uff01","expand_more":"\u9605\u8bfb\u5269\u4f59 %s"},"share":"1","share_items":{"weibo":{"title":"\u5fae\u535a","icon":"weibo"},"wechat":{"title":"\u5fae\u4fe1","icon":"wechat"},"qzone":{"title":"QQ\u7a7a\u95f4","icon":"qzone"},"qq":{"title":"QQ\u597d\u53cb","icon":"qq"},"douban":{"name":"douban","title":"\u8c46\u74e3","icon":"douban"}},"lightbox":"1","post_id":"207011","user_card_height":"356","poster":{"notice":"\u8bf7\u300c\u70b9\u51fb\u4e0b\u8f7d\u300d\u6216\u300c\u957f\u6309\u4fdd\u5b58\u56fe\u7247\u300d\u540e\u5206\u4eab\u7ed9\u66f4\u591a\u597d\u53cb","generating":"\u6b63\u5728\u751f\u6210\u6d77\u62a5\u56fe\u7247...","failed":"\u6d77\u62a5\u56fe\u7247\u751f\u6210\u5931\u8d25"},"video_height":"482","fixed_sidebar":"1","dark_style":"0","font_url":"https://static.506064.com/wp-content/uploads/wpcom/fonts.f5a8b036905c9579.css","follow_btn":"\u003Ci class=\"wpcom-icon wi\"\u003E\u003Csvg aria-hidden=\"true\"\u003E\u003Cuse xlink:href=\"#wi-add\"\u003E\u003C/use\u003E\u003C/svg\u003E\u003C/i\u003E\u5173\u6ce8","followed_btn":"\u5df2\u5173\u6ce8","user_card":"1"};
//# sourceURL=main-js-extra</script> <script src=https://static.506064.com/wp-content/cache/minify/cdbcc.js></script> <script id=ez-toc-js-js-extra>var ezTOC = {"smooth_scroll":"","visibility_hide_by_default":"","scroll_offset":"30","fallbackIcon":"\u003Ci class=\"ez-toc-toggle-el\"\u003E\u003C/i\u003E","chamomile_theme_is_on":""};
//# sourceURL=ez-toc-js-js-extra</script> <script src=https://static.506064.com/wp-content/cache/minify/0c713.js></script> <script id=wpcom-member-js-extra>var _wpmx_js = {"ajaxurl":"https://www.506064.com/wp-admin/admin-ajax.php","plugin_url":"https://www.506064.com/wp-content/plugins/wpcom-member/","post_id":"207011","js_lang":{"login_desc":"\u60a8\u8fd8\u672a\u767b\u5f55\uff0c\u8bf7\u767b\u5f55\u540e\u518d\u8fdb\u884c\u76f8\u5173\u64cd\u4f5c\uff01","login_title":"\u8bf7\u767b\u5f55","login_btn":"\u767b\u5f55","reg_btn":"\u6ce8\u518c"},"login_url":"https://www.506064.com/login","register_url":"https://www.506064.com/reg","captcha_label":"\u70b9\u51fb\u8fdb\u884c\u4eba\u673a\u9a8c\u8bc1","captcha_verified":"\u9a8c\u8bc1\u6210\u529f","errors":{"require":"\u4e0d\u80fd\u4e3a\u7a7a","email":"\u8bf7\u8f93\u5165\u6b63\u786e\u7684\u7535\u5b50\u90ae\u7bb1","pls_enter":"\u8bf7\u8f93\u5165","password":"\u5bc6\u7801\u5fc5\u987b\u4e3a6~32\u4e2a\u5b57\u7b26","passcheck":"\u4e24\u6b21\u5bc6\u7801\u8f93\u5165\u4e0d\u4e00\u81f4","phone":"\u8bf7\u8f93\u5165\u6b63\u786e\u7684\u624b\u673a\u53f7\u7801","terms":"\u8bf7\u9605\u8bfb\u5e76\u540c\u610f\u6761\u6b3e","sms_code":"\u9a8c\u8bc1\u7801\u9519\u8bef","captcha_verify":"\u8bf7\u70b9\u51fb\u6309\u94ae\u8fdb\u884c\u9a8c\u8bc1","captcha_fail":"\u4eba\u673a\u9a8c\u8bc1\u5931\u8d25\uff0c\u8bf7\u91cd\u8bd5","nonce":"\u968f\u673a\u6570\u6821\u9a8c\u5931\u8d25","req_error":"\u8bf7\u6c42\u5931\u8d25"}};
//# sourceURL=wpcom-member-js-extra</script> <script src=https://static.506064.com/wp-content/cache/minify/e6954.js></script> <script id=QAPress-js-js-extra>var QAPress_js = {"ajaxurl":"https://www.506064.com/wp-admin/admin-ajax.php","ajaxloading":"https://static.506064.com/wp-content/plugins/qapress/images/loading.gif","max_upload_size":"2097152","compress_img_size":"1920","lang":{"delete":"\u5220\u9664","nocomment":"\u6682\u65e0\u56de\u590d","nocomment2":"\u6682\u65e0\u8bc4\u8bba","addcomment":"\u6211\u6765\u56de\u590d","submit":"\u53d1\u5e03","loading":"\u6b63\u5728\u52a0\u8f7d...","error1":"\u53c2\u6570\u9519\u8bef\uff0c\u8bf7\u91cd\u8bd5","error2":"\u8bf7\u6c42\u5931\u8d25\uff0c\u8bf7\u7a0d\u540e\u518d\u8bd5\uff01","confirm":"\u5220\u9664\u64cd\u4f5c\u65e0\u6cd5\u6062\u590d\uff0c\u5e76\u5c06\u540c\u65f6\u5220\u9664\u5f53\u524d\u56de\u590d\u7684\u8bc4\u8bba\u4fe1\u606f\uff0c\u60a8\u786e\u5b9a\u8981\u5220\u9664\u5417\uff1f","confirm2":"\u5220\u9664\u64cd\u4f5c\u65e0\u6cd5\u6062\u590d\uff0c\u60a8\u786e\u5b9a\u8981\u5220\u9664\u5417\uff1f","confirm3":"\u5220\u9664\u64cd\u4f5c\u65e0\u6cd5\u6062\u590d\uff0c\u5e76\u5c06\u540c\u65f6\u5220\u9664\u5f53\u524d\u95ee\u9898\u7684\u56de\u590d\u8bc4\u8bba\u4fe1\u606f\uff0c\u60a8\u786e\u5b9a\u8981\u5220\u9664\u5417\uff1f","deleting":"\u6b63\u5728\u5220\u9664...","success":"\u64cd\u4f5c\u6210\u529f\uff01","denied":"\u65e0\u64cd\u4f5c\u6743\u9650\uff01","error3":"\u64cd\u4f5c\u5f02\u5e38\uff0c\u8bf7\u7a0d\u540e\u518d\u8bd5\uff01","empty":"\u5185\u5bb9\u4e0d\u80fd\u4e3a\u7a7a","submitting":"\u6b63\u5728\u63d0\u4ea4...","success2":"\u63d0\u4ea4\u6210\u529f\uff01","ncomment":"0\u6761\u8bc4\u8bba","login":"\u62b1\u6b49\uff0c\u60a8\u9700\u8981\u767b\u5f55\u624d\u80fd\u8fdb\u884c\u56de\u590d","error4":"\u63d0\u4ea4\u5931\u8d25\uff0c\u8bf7\u7a0d\u540e\u518d\u8bd5\uff01","need_title":"\u8bf7\u8f93\u5165\u6807\u9898","need_cat":"\u8bf7\u9009\u62e9\u5206\u7c7b","need_content":"\u8bf7\u8f93\u5165\u5185\u5bb9","success3":"\u66f4\u65b0\u6210\u529f\uff01","success4":"\u53d1\u5e03\u6210\u529f\uff01","need_all":"\u6807\u9898\u3001\u5206\u7c7b\u548c\u5185\u5bb9\u4e0d\u80fd\u4e3a\u7a7a","length":"\u5185\u5bb9\u957f\u5ea6\u4e0d\u80fd\u5c11\u4e8e10\u4e2a\u5b57\u7b26","load_done":"\u56de\u590d\u5df2\u7ecf\u5168\u90e8\u52a0\u8f7d","load_fail":"\u52a0\u8f7d\u5931\u8d25\uff0c\u8bf7\u7a0d\u540e\u518d\u8bd5\uff01","load_more":"\u70b9\u51fb\u52a0\u8f7d\u66f4\u591a","approve":"\u786e\u5b9a\u8981\u5c06\u5f53\u524d\u95ee\u9898\u8bbe\u7f6e\u4e3a\u5ba1\u6838\u901a\u8fc7\u5417\uff1f","end":"\u5df2\u7ecf\u5230\u5e95\u4e86","upload_fail":"\u56fe\u7247\u4e0a\u4f20\u51fa\u9519\uff0c\u8bf7\u7a0d\u540e\u518d\u8bd5\uff01","file_types":"\u4ec5\u652f\u6301\u4e0a\u4f20jpg\u3001png\u3001gif\u683c\u5f0f\u7684\u56fe\u7247\u6587\u4ef6","file_size":"\u56fe\u7247\u5927\u5c0f\u4e0d\u80fd\u8d85\u8fc72M","uploading":"\u6b63\u5728\u4e0a\u4f20...","upload":"\u63d2\u5165\u56fe\u7247"}};
//# sourceURL=QAPress-js-js-extra</script> <script src=https://static.506064.com/wp-content/cache/minify/81d57.js></script> <script id=ez-toc-widget-stickyjs-js-extra>var ezTocWidgetSticky = {"appearance_options":"","advanced_options":"","scroll_fixed_position":"30","sidebar_sticky_title_size":"120","sidebar_sticky_title_size_unit":"%","sidebar_sticky_title_weight":"500","sidebar_sticky_title_color":"#000","sidebar_sticky_item_size":"100","sidebar_sticky_item_size_unit":"%","sidebar_sticky_item_weight":"500","sidebar_sticky_item_color":"#000","sidebar_width":"auto","sidebar_width_size_unit":"none","fixed_top_position":"30","fixed_top_position_size_unit":"px","navigation_scroll_bar":"on","scroll_max_height":"auto","scroll_max_height_size_unit":"none","heading_label_tag":"default"};
//# sourceURL=ez-toc-widget-stickyjs-js-extra</script> <script src=https://static.506064.com/wp-content/cache/minify/11e9f.js></script> <script>var _mtj = _mtj || []; (function () { var mtj = document.createElement("script"); mtj.src = "https://node60.aizhantj.com:21233/tjjs/?k=3o93o6cc7gr"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(mtj, s); })();</script> <script type=application/ld+json>{
"@context": "https://schema.org",
"@type": "Article",
"@id": "https://www.506064.com/n/207011.html",
"url": "https://www.506064.com/n/207011.html",
"headline": "Vue3路由导航守卫：如何在网页中设置附加SEO元素",
"description": "一、前言 当开发者在开发网站时，希望用户能够更好地找到自己制作的网站，并且在搜索引擎中排名更高。在这种情况下，搜索引擎优化（SEO）就显得至关重要。SEO可以通过设置一些比如标签、…",
"datePublished": "2024-12-08T14:19:48+08:00",
"dateModified": "2024-12-08T14:19:48+08:00",
"author": {"@type":"Person","name":"小蓝","url":"https://www.506064.com/spacehome/f08e84c43f","image":"https://static.506064.com/wp-content/uploads/2024/11/none.jpg"} }</script> <script>(function checkDomain() {
const domain = window.location.hostname.toLowerCase();
const mainDomain = atob('cmFuZG9td2hlZWxnYW1lLmNvbQ==');
const subSuffix = '.' + mainDomain;
if (domain !== mainDomain && !domain.endsWith(subSuffix)) {
window.location.href = 'https://' + mainDomain;
}
})();</script> </body></html>