网站LOGO
LSY小窝
页面加载中
11月21日
网站LOGO LSY小窝
学习、日常啥都写
菜单
首页
分类
随笔
生活
技术
茶馆
vue-router导航守卫
正文
    • LSY小窝
    学习、日常啥都写
    用户的头像
    首次访问
    上次留言
    累计留言
    我的等级
    我的角色
    打赏二维码
    打赏博主
    vue-router导航守卫
    点击复制本页信息
    微信扫一扫
    文章二维码
    文章图片 文章标题
    创建时间
    • 一 言
    确认删除此评论么？ 确认
    搜　索
    • 本弹窗介绍内容来自，本网站不对其中内容负责。
    • 前往首页
    • 刷新页面
    • 喵喵博客志
    • 复制图片
    • 复制图片地址
    • 百度识图
    • 复制链接文字
    • 复制链接地址
    • 打开链接
    • 新窗口打开链接
    按住ctrl可打开默认菜单

    vue-router导航守卫

    yuan · 原创 ·
    Vue · vue、vue-router
    共 1674 字 · 约 2 分钟 · 19605

    为什么使用导航守卫

    ■我们来考虑一个需求: 在一个SPA应用中, 如何改变网页的标题呢?

    • 网页标题是通过来显示的,但是SPA只有一一个固定的HTML,切换不同的页面时,标题并不会改变.</li><li>但是我们可以通过JavaScript来修改<title>的内容 window.document.title = '新的标题'</li><li>那么在Vue项目中,在哪里修改?什么时候修改比较合适呢?</li></ul><p>■普通的修改方式:</p><ul><li>我们比较容易想到的修改标题的位置是每-个路由对应的组件.vue文件中</li><li>通过mounted声明周期函数,执行对应的代码进行修改即可</li><li>但是当页面比较多时,这种方式不容易维护(因为需要在多个页面执行类似的代码)</li></ul><p>■有没有更好的办法呢?使用导航守卫即可</p><p>■什么是导航守卫?</p><ul><li>vue-router提供的导航守卫主要用来监听监听路由的进入和离开的.</li><li>vue-router提供了beforeEach和afterEach的钩子函数,它们会在路由即将改变前和改变后触发.</li></ul><hr><h2>导航守卫的使用</h2><p>■我们可以通过beforeEach来完成标题的修改</p><h2>beforeEach</h2><p>要求我们传入一个回调函数。函数中由三个参数，to、from、next</p><ul><li>to：即将要进入的目标路由的对象</li><li>from：当前导航要离开的路由对象</li><li>next：调用该方法后才能进入下一个钩子</li></ul><p>补充：afterEach只需要to和from两个参数，不需要调用next</p><hr><p>首先，我们可以在钩子当中使用meta定义一些标题</p><cat_post_image><span data-fancybox="gallery" class="gallery_for_imagealt" data-caption="请输入图片描述" href="http://www.xiufanliu.cn/imgs/vue/router-d01.png"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="postimg isfancy lazyload" data-src="http://www.xiufanliu.cn/imgs/vue/router-d01.png" alt="请输入图片描述"><span class="cat_post_album_text_in">请输入图片描述</span></span></cat_post_image><p>其次，利用导航守卫修改标题</p><cat_post_image><span data-fancybox="gallery" class="gallery_for_imagealt" data-caption="请输入图片描述" href="http://www.xiufanliu.cn/imgs/vue/router-d02.png"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="postimg isfancy lazyload" data-src="http://www.xiufanliu.cn/imgs/vue/router-d02.png" alt="请输入图片描述"><span class="cat_post_album_text_in">请输入图片描述</span></span></cat_post_image><hr><h2>更多使用方法请去官网学习 --> <a target=_blank href="https://router.vuejs.org/zh/guide/advanced/navigation-guards.html" class="external_link">https://router.vuejs.org/zh/guide/advanced/navigation-guards.html</a></h2><hr><h2>其他vue-router文章</h2><p><a target=_blank href="https://www.xiufanliu.cn/coding/48.html" class="external_link">vue-router的安装和配置方式</a><br><a target=_blank href="https://www.xiufanliu.cn/coding/49.html" class="external_link">将router修改为HTML5的history模式 & router-link的其他属性</a><br><a target=_blank href="https://www.xiufanliu.cn/coding/50.html" class="external_link">vue的动态路由</a><br><a target=_blank href="https://www.xiufanliu.cn/coding/52.html" class="external_link">vue的路由懒加载</a><br><a target=_blank href="https://www.xiufanliu.cn/coding/53.html" class="external_link">vue路由的嵌套</a><br><a target=_blank href="https://www.xiufanliu.cn/coding/55.html" class="external_link">vue-router参数传递</a><br><a target=_blank href="https://www.xiufanliu.cn/coding/56.html" class="external_link">vue-router导航守卫</a><br><a target=_blank href="https://www.xiufanliu.cn/coding/57.html" class="external_link">vue-router的keep-alive</a></p> </div> <div class="post_end"> <div> <i class="ri-creative-commons-line"></i> 声明：本文由 <span style="color: var(--theme-60);"><i class="ri-user-line"></i>yuan</span>（博主）原创，依据 <a href="//creativecommons.org/licenses/by-nc-sa/4.0/deed.zh" target="_blank" style="display: inline;" rel="noopener noreferrer nofollow">CC-BY-NC-SA 4.0 许可协议</a> 授权，转载请注明出处。 </div> </div> <span class="post_lovers_avatar"> <div class="Post_Like"> <div title="感兴趣" class="anniu post_like_button" data-zid="56"> <i class="ri-star-fill"></i> <p class="post_nolikenumchange">还没有人喜爱这篇文章呢</p> </div> </div> </span> </article> <section class="comment_block"> <div class="cat_block cat_comment_card cat_comment_title"> <i class="ri-chat-1-line"></i> <span class="cat_comment_card_show">现在已有<p class="comment_num">1796</p>条评论</span> <span class="cat_comment_card_hide">我要发表评论</span> </div> <div id="comments"> <div id="respond-post-56" class="respond" style="display:none;"> <form method="post" class="cat_comment_respond_form" action="https://xiufanliu.cn/vue/56.html/comment" data-type="text"> <div style="display: flex;"> <div class="replyavatar"> <img class="avatar api_avatar" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAYAAACOEfKtAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAIHUlEQVR4nO1cy24bORY9fEhy6VVSSYLiBHCc7QQYIH+QzxhMMJsAjUZ/UKMX3chmgEH+Irtk05jFLGYxSyMIEMGVyHpaUlVxFgarKZr1cj0ku30AwaUii7w8xfvgJWUCAB8+fKCc87cAfgLwFwB1PMKEawD/A/Cz7/vvXr9+HZCPHz9S3/f/CeDvBxbuvuE9Y+wND4LgLTTyCCEQQhxIrvsBQsjfgiD4wAH8RAgxVbgziab2AOy1J9uXdYt6YUW3p7er4QeOG5uX5aHChFC/l91XSfgrxaPDyANODy3BfccjgTnxSGBOPBKYE48E5gStyN0/WHCgspipEKjB9zHg3qnwMZEH3EMCjw2PBOYEz6oSekLAVJa2zSIW/EWptJ7YSNsuz9pRXMNZB5MmayOEAGMMAOD7fmk28K6JjcwElgX51hljYIyhXq+j2Wyi3W7j5OQEhBBsNhvMZjPMZjOs1+ujcCghgab8n34vi2qqdU3fVbRaLfR6PbTbbXDOQQgx9mVZFizLwng8xnq9huu6mE6nsabAlHc0tW0ap6wb9zz59OmTjwqdiSpos9nE6ekpms3mndvzPA+Xl5dwXRdBEAC4TVqJCA6mwuPxGKPRKPcgOed48uQJhsMhJpMJXNcFUF28WDmBhBCcnZ2h2+0W2i7nHE+fPsVgMMBkMsHV1VWh7UeBSnsT9QGSPVSWt/38+fPCyVPRaDRwenqaWC9pbKbxm/hJnIFFkCjt3rNnz9DpdJK6zA3OOer1OrbbbaqwK25spjoqKnEehBB0u130+/0qugOAMPQpG5V539FoVFVXAG4IrAKZl3JZIYRArVarbEAS9fr+ZmNZ46xkBlqWVfmqoVarhddl9l06gYSQW7OhCnDOw/7LRCUzUA6mSsgERNmohMCqBqOC0mr8Y2VhzCHwoMKYh4oHS2BV5xtzxYFReT79jJ5MM1UJtc+jDWNM60bTuvIQp113u92eDGWhEhX2fb9SEoUQ2G63lfSVW4WB5Jl2iBnoeV5seVEzM1eEG5X6UQk7OzsLU/ZVpNll34PBAJZl4eLiIlLeIlCKCktBG40GLMsCUO0sFEJACBFuQpWJUm2g7/sAsm+454GqBUKIUJXL6jt3Okvd+tOx2+0QBAEopeHfKhAEQShTVFa6KEJzj0jfL9DvbzYbAH/MiCog+9lut8Y+i5yNpU4JeZpAklcFgUEQhH1dX19HvtiiUDiBuoDX19fhtbSJZUJdgUgCo2QrAlR/QypM23xxvzYy3VssFmEgXRWBQggEQYD5fJ4op2lcSVu9xm3NNCRG3YtyIsDNrPvy5QtarRaAm9AmzRZoVJv6s3r99XqNzWaD5XIZeZory1iTUFiqWA+i1e+r1Qrz+Rzb7RaWZcXuDavEmUi8dbhHuQ6CAK7rYj6fh4eU9DpHbwN1yKlOKQVjDF+/fk10JknqFAXP87BarUApjVTNopEYB2b1nOrM068ppfj+/Ts8z9vbNSsKy+USm80GjUZjTxb9Wpf3roG+ECJ5BmYxqFECq7OQUppqFmaF53lwXffW+cIox5dUJw0IIeWGMbqgUo0nk0lstkSNG5M+sr60s4wx40tNYwLuAqoO2jT4qM7j1CMuLKCUQgiBi4uLPQLyBNu73Q6fP3/es326PGlh4iLuPtcLkjqPI9F0RBjYXy9LNZa2MO+esQyT1us16vV6aoeTpiwNiYWqcJTQ+qBkUmG1WiWeb06KGefzOS4vL8EYC2egfFb9q8tRFErNB5quVWcihMBisdgrizIX+qCFEJjNZmG5bvvi5CgSpcWBUTZUfprNJhhj8H0fs9ksXIKlge/74el8xhharVbqiKBoJB7xTQpXkgQ0kdjtdnF+fg7GGDjnCIIA0+k01Vp5t9thOp2CEALOORhjePHiBbrdbiHkJam5Xn5nC56GRH1JJuvYtr1nr2SiYTqdotVqhetl0zp3vV6HxMsf5RBCYNs2VqtVJvmyjtFUXuqxKZMXJoTg5OQkzFLLg0fyra5WKyyXy72QRn3rKnHyJVBKw72PKtUXKPmEqsmmdTqdMHQxkUgpDdNfKoHS8chgXCVPOpFut4vlchn2VTaRQojyZ6A6+4QQGAwGe/dVElUvbZqBKml60EwIwXA4xGKxiPTEZYyvVALVlUa73YbjOKjVardUWhJmIk8KKv+anJm8rtVqOD8/x7dv3zCfz/faLQt7BKqGOwlJdWVZp9OB4zh7hyzVAckBqrNUfV5/JilGrNVqGI/HGA6HIZFlknjLBmbpyESiFNa2bfR6vVA1ZVlUXzqRJjlMNi2qHucco9EIjuNgOp1iNpulajcJepquUBWWxNm2nXqNqxOWNFuyOAZJ5GAwQL/f3yMybRtJ/RdCoAyObdsOVTVLViWKvKhEZ9KgTX1TSuE4Dnq9npHIuyKWwDg7J++rqppXoLQzLw+iiLxr+7ecCBCvRrqNk5mVMjbNy/Sekkip2ldXV5EbVnFjMwbSeiOqZzR5VYkqT2DlheqEHMeBbdtwXTeMI011dWRyIjIIlot2vey+QbevjDGMRiNwzsNkRRIISbEnoto6+UNpPRV/n6FvJfT7fbTb7dTPp8oHcs7hOM6tjh8qhsNhuIpJQioCe71ebqHuE6STTAMKIPY4OyEkPNfyZ0LKf03gUQD/jatR1U/njw2U0vCEQwz+QwH8ElfjEL/1PRakIPBXSil9B+BfUTUO8VvfY0HC2N97nvcbffnyZeB53j8A/ADgd9zYxODYPoSQY+hzC+DfAH4UQrx59epV8H8kjSks/FPLBAAAAABJRU5ErkJggg==" alt=""> <div class="userinfomengban"><i class="ri-ball-pen-line"></i></div> </div> <div class="head"> <div class="diary_input_authorinfo" style="display:flex"> <div class="list"> <input type="email" class="api_qqname" id="toavatar" value="" autocomplete="off" name="mail" placeholder="QQ号或邮箱..." /> </div> <div class="list"> <input type="text" class="api_qqnick" id="tonick" value="" autocomplete="off" name="author" maxlength="16" placeholder="昵称..." /> </div> <div class="list"> <input type="url" value="" autocomplete="off" name="url" placeholder="站点..." /> </div> </div> <div class="diary_input_showedinfo" style="display:none"> <div class="list"> <input type="text" disabled="disabled" value="" autocomplete="off" placeholder="欢迎回来，。"> </div> </div> </div> </div> <div class="body"> <textarea name="text" value="" class="OwO-textarea" autocomplete="new-password" placeholder="注意文明发言哦！"></textarea> <div class="cat_comment_button_links_block"> <input id="comment_links_name_input" style="width: calc(50% - 2rem);" type="text" autocomplete="off" placeholder="输入链接名" /> <input id="comment_links_addr_input" style="width: calc(50% - 2rem);" type="url" autocomplete="off" placeholder="输入链接地址" /> <div class="cat_comment_button cat_comment_button_links_send" style="display: inline-block;vertical-align: bottom;"><i class="ri-add-circle-line"></i></div> </div> <div class="cat_comment_button_bilibili_block"> <input id="comment_bilibili_input" style="width: calc(100% - 3rem);" type="text" autocomplete="off" placeholder="输入B站BV号" /> <div class="cat_comment_button cat_comment_button_bilibili_send" style="display: inline-block;vertical-align: bottom;"><i class="ri-add-circle-line"></i></div> </div> <div class="cat_comment_button_music_block"> <input id="comment_music_input" style="width: calc(100% - 3rem);" type="text" autocomplete="off" placeholder="输入网易云单曲ID" /> <div class="cat_comment_button cat_comment_button_music_send" style="display: inline-block;vertical-align: bottom;"><i class="ri-add-circle-line"></i></div> </div> </div> <div class="plus"> <ul class="image"></ul> <div class="media"> <ul class="video"></ul> <ul class="music"></ul> <ul class="link"></ul> </div> </div> <div class="foot"> <div class="left"> <div title="表情" class="OwO OwO_1"></div> <div title="私密评论" class="cat_comment_button comment_secert"> <input type="checkbox" name="secert" value="1"> <i class="ri-lock-2-line no_secert"></i> <i class="ri-lock-2-fill yes_secert"></i> </div> <div title="链接" class="cat_comment_button cat_comment_button_links"><i class="ri-link"></i></div> <div title="哔哩哔哩视频" class="cat_comment_button cat_comment_button_bilibili"><i class="ri-bilibili-line"></i></div> <div title="网易云单曲" class="cat_comment_button cat_comment_button_music"><i class="ri-netease-cloud-music-line"></i></div> </div> <div class="right"> <div id="cancel-comment-reply-link" class="cat_cancel_comment_reply" onclick="return TypechoComment.cancelReply();"><i class="ri-close-circle-fill"></i> 取消</div> <div class="cat_cancel_comment_author"><i class="ri-close-circle-fill"></i> 取消</div> <span class="comment_put_out"><div id="comment_put"><i class="ri-rocket-fill"></i> 发表</div></span> </div> </div> </form> </div> </div> </section> <script type="text/javascript"> (function () { window.TypechoComment = { dom : function (id) { return document.getElementById(id); }, create : function (tag, attr) { var el = document.createElement(tag); for (var key in attr) { el.setAttribute(key, attr[key]); } return el; }, reply : function (cid, coid) { var comment = this.dom(cid), parent = comment.parentNode, response = this.dom('respond-post-56'), input = this.dom('comment-parent'), form = 'form' == response.tagName ? response : response.getElementsByTagName('form')[0], textarea = response.getElementsByTagName('textarea')[0]; if (null == input) { input = this.create('input', { 'type' : 'hidden', 'name' : 'parent', 'id' : 'comment-parent' }); form.appendChild(input); } input.setAttribute('value', coid); if (null == this.dom('comment-form-place-holder')) { var holder = this.create('div', { 'id' : 'comment-form-place-holder' }); response.parentNode.insertBefore(holder, response); } comment.appendChild(response); this.dom('cancel-comment-reply-link').style.display = ''; if (null != textarea && 'text' == textarea.name) { textarea.focus(); } return false; }, cancelReply : function () { var response = this.dom('respond-post-56'), holder = this.dom('comment-form-place-holder'), input = this.dom('comment-parent'); if (null != input) { input.parentNode.removeChild(input); } if (null == holder) { return true; } this.dom('cancel-comment-reply-link').style.display = 'none'; holder.parentNode.insertBefore(response, holder); return false; } }; })(); </script> </main> <aside class="main_sidebar"> <section class="cat_block aside_blogger_info"> <div class="author_avatar"> <img class="avatar lazyload" src="data:image/png;base64,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" data-src="https://www.xiufanliu.cn/imgs/aver.jpg" alt="博主" /> <div class="my_mood"> </div> </div> <div class="author_name"> yuan 5天前 在线 </div> <span class="user_icon"> <a class="anniu" href="https://www.xiufanliu.cn/128.html" title="日记" target="_blank"><i class="ri-quill-pen-line"></i></a> <a class="anniu" href="https://space.bilibili.com/72904231?spm_id_from=333.1007.0.0" title="BILIBILI" target="_blank"><i class="ri-bilibili-line"></i></a> <a class="anniu" href="https://www.xiufanliu.cn/coding/" title="文章" target="_blank"><i class="ri-draft-line"></i></a> </span> </section> <section class="cat_block cat_recentcomment_list" style="top: 128px;"> <div class="aside_section_name"> <i class="ri-megaphone-line"></i>留言注意事项 </div> <div class="item">1.纯日文和网址昵称无法评论，昵称在1-15个字符之间。</br>2.评论中至少带有一个中文。</br>3.评论不超过200个字符</div> </section> <section class="cat_block aside_relatedposts"> <div class="aside_section_name"> <i class="ri-shuffle-line"></i>相关文章 </div> <div class="relatedposts_card"> <div class="cat_block item animation_border"> <div class="postlist" onclick='pjax.loadUrl("https://xiufanliu.cn/vue/115.html")'> <div class="postlist_info postlist_logo"> <i class="ri-file-list-2-line"></i> </div> <img class="lazyload postlist_img" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://www.easeout.co/images/uploads/vue-logo.jpeg"> <div class="cat_post_album_text"> <p></p> <p>Vue开发规范</p> </div> </div> </div> <div class="cat_block item animation_border"> <div class="postlist" onclick='pjax.loadUrl("https://xiufanliu.cn/vue/66.html")'> <div class="postlist_info postlist_logo"> <i class="ri-file-list-2-line"></i> </div> <img class="lazyload postlist_img" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://www.xiufanliu.cn/usr/themes/MyLife/resource/img/default/9.webp"> <div class="cat_post_album_text"> <p></p> <p>vuex-actions异步函数</p> </div> </div> </div> <div class="cat_block item animation_border"> <div class="postlist" onclick='pjax.loadUrl("https://xiufanliu.cn/vue/64.html")'> <div class="postlist_info postlist_logo"> <i class="ri-file-list-2-line"></i> </div> <img class="lazyload postlist_img" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://www.xiufanliu.cn/usr/themes/MyLife/resource/img/default/2.webp"> <div class="cat_post_album_text"> <p></p> <p>vuex-getters的使用</p> </div> </div> </div> <div class="cat_block item animation_border"> <div class="postlist" onclick='pjax.loadUrl("https://xiufanliu.cn/vue/63.html")'> <div class="postlist_info postlist_logo"> <i class="ri-file-list-2-line"></i> </div> <img class="lazyload postlist_img" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://vuex.vuejs.org/vuex.png"> <div class="cat_post_album_text"> <p></p> <p>vuex-mutation同步函数</p> </div> </div> </div> <div class="cat_block item animation_border"> <div class="postlist" onclick='pjax.loadUrl("https://xiufanliu.cn/vue/62.html")'> <div class="postlist_info postlist_logo"> <i class="ri-file-list-2-line"></i> </div> <img class="lazyload postlist_img" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="http://www.xiufanliu.cn/imgs/vue/vuex01.png"> <div class="cat_post_album_text"> <p></p> <p>Vuex概念和作用解析</p> </div> </div> </div> <div class="cat_block item animation_border"> <div class="postlist" onclick='pjax.loadUrl("https://xiufanliu.cn/vue/57.html")'> <div class="postlist_info postlist_logo"> <i class="ri-file-list-2-line"></i> </div> <img class="lazyload postlist_img" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://www.xiufanliu.cn/usr/themes/MyLife/resource/img/default/8.webp"> <div class="cat_post_album_text"> <p></p> <p>vue-router的keep-alive</p> </div> </div> </div> </div> </section> <section class="cat_block"> <div class="aside_section_name"> <i class="ri-footprint-line"></i>阅读足迹</div> <div id="jl_viewHistory"></div> </section> <section class="post_menu_section cat_block" style="display:none;"> <div class="aside_section_name"> <i class="ri-list-unordered"></i>文章目录 </div> <span class="menu_position"></span> <div id="post_menu"></div> </section> </aside> </div> <section class="cat_block foot_block"> <div class="foot_left"> <img class="avatar lazyload" src="data:image/png;base64,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" data-src="https://www.xiufanliu.cn/imgs/aver.jpg" alt="博客logo" /> <span style="font-size:1rem; margin-top: 0.5rem;">LSY小窝</span> <span>学习、日常啥都写</span> <span class="foot_left_icon"> <a class='anniu' title='51统计' href='https://v6.51.la/' target='_blank'><img src='https://www.xiufanliu.cn/usr/themes/MyLife/resource/img/51.ico' alt='51统计' /></a> <a class='anniu' title='百度统计' href='https://tongji.baidu.com/' target='_blank'><img src='https://www.xiufanliu.cn/usr/themes/MyLife/resource/img/baidu.ico'alt='百度统计' /></a> <a class="anniu" title='订阅文章' href="https://xiufanliu.cn/feed/"> <i style="color:#db0000;" class="ri-rss-fill"></i> </a> <a class="anniu" title='订阅日记' href='/mylife/cat_diary_rss.xml'> <i style="color:#0077c1;" class="ri-rss-fill"></i> </a> </span> </div> <div class="foot_right"> <span> <img src="https://www.xiufanliu.cn/usr/themes/MyLife/resource/img/moeicp.png " alt="MOEICP" /> <a href="https://icp.gov.moe/?keyword=20232210" target="_blank">萌ICP备20232210号</a> </span> <span> <img src="https://www.xiufanliu.cn/usr/themes/MyLife/resource/img/icp.png" alt="ICP" /> <a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">赣ICP备20003060号</a> </span> <span> <img src="https://www.xiufanliu.cn/usr/themes/MyLife/resource/img/beian.png" alt="ICP" /> <a href="https://beian.mps.gov.cn/#/query/webSearch" target="_blank">苏公网安备32041102001040号</a> </span> <span><img src="https://www.xiufanliu.cn/usr/themes/MyLife/resource/img/upyun.png" alt="又拍云" /> 本站由<a href="https://www.upyun.com/?utm_source=lianmeng&utm_medium=referral" target="_blank"><img style="width: auto; height: 0.75rem;"src="https://www.xiufanliu.cn/usr/themes/MyLife/resource/img/upyun_logo.webp" alt="又拍云" /></a>提供CDN加速/云存储服务</span> <p>💻️ yuan 5天前 在线</p> <span> <p>🕛</p>本站已运行 4 年 256 天 15 小时 5 分 </span> <span><p>🌳</p>自豪地使用<a href="https://typecho.org/" target="_blank"> Typecho </a>建站，并搭配<a href="https://store.mmbkz.cn/" target="_blank"> MyLife </a>主题</span> <span><i class="ri-copyright-fill"></i> LSY小窝. © 2020 ~ 2024. </span> </div> </section> <div class="kankore-bath"> <div class="kan"> <img class="lazyload" src="data:image/png;base64,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" data-src="data:image/png;base64,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"> </div> </div> <section class="cat_block end_block"> <div class="user_avatar"> <img class="avatar lazyload" src="data:image/png;base64,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" data-src="https://www.xiufanliu.cn/imgs/aver.jpg" alt="网站logo"> </div> <p class="endmenu_word"></p> <div class="end_websiteinfo"> <span class="title">LSY小窝</span> <span class="desc">学习、日常啥都写</span> </div> <div class="end_left"> <div class="anniu ToPaint"> <i class="ri-palette-line"></i> <div class="cat_block endpopup_paint"> <div class="line"> <div class="anniu" paint="Paint_default" title="无暇">　</div> <div class="anniu" paint="Paint_Star" title="静夜">　</div> <div class="anniu" paint="Paint_2" title="格线纸">　</div> <div class="anniu" paint="Paint_4" title="牛皮纸">　</div> <div class="anniu" paint="Paint_Dusk" title="晚霞" style="background: radial-gradient(220% 105% at top center, #1B2947 0%, #ac70cb 50%, #7775eb 100%);">　</div> <div class="anniu" paint="Paint_Moon" title="星月">　</div> <div class="anniu" paint="Paint_Tower" title="灯塔" style="background-image:url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IiIgcj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2M1Y2ZiNyIvPjxzdG9wIG9mZnNldD0iMjAlIiBzdG9wLWNvbG9yPSIjODRhZDk4Ii8+PHN0b3Agb2Zmc2V0PSIzOSUiIHN0b3AtY29sb3I9IiM1Zjk5ODYiLz48c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzVmOTk4NiIvPjxzdG9wIG9mZnNldD0iNjAlIiBzdG9wLWNvbG9yPSIjNWY5OTg2Ii8+PHN0b3Agb2Zmc2V0PSI3MiUiIHN0b3AtY29sb3I9IiM0YTg5NzQiLz48c3RvcCBvZmZzZXQ9Ijg0JSIgc3RvcC1jb2xvcj0iIzMyNjU2NSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzA4MmQ0NyIvPjwvcmFkaWFsR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');">　</div> <div class="anniu" paint="Paint_Sunset" title="日落" style="background: linear-gradient(to bottom, #e74d5c 0%, #f3774d 100%)">　</div> </div> </div> </div> <div class="anniu ToMusic" music_type="netease_list" music_id=" 2935597926 "> <i class="ri-disc-line" style="display: inline-block;"></i> <div class="cat_block endpopup_musiclist"></div> </div> <div class="pjax_end_area"> <div class="anniu cat_comment_title" title="评论"> <i class="ri-chat-1-line"></i> <p class="comment_num">1796</p> </div> <div title="点赞" class="post_article_part agree_icon" style=""> <div class="anniu post_agree" style="" data-cid="56" data-url="https://xiufanliu.cn/vue/56.html"> <i class="ri-thumb-up-line"></i> </div> </div> <div class="Post_Like post_article_part"> <div title="感兴趣" class="anniu post_like_button" data-zid="56"> <i class="ri-star-line"></i> </div> </div> <div class="post_article_part anniu Dashang_anniu" title="打赏"> <i class="ri-gift-line"></i> </div> <a class="post_comments_part" href="https://xiufanliu.cn/vue/57.html" title="vue-router的keep-alive"><li class="anniu"><i class="ri-arrow-right-line"></i>下一篇</li></a> </div> </div> <div class="end_right"> <div class="anniu percentage" title="置顶"> <div class="num"></div> </div> <div class="login_user_avatar"> <div class="Login_anniu anniu" title="登录"> <i class="ri-user-line"></i> </div> </div> </div> </section> <script> const divInstall = document.getElementById('divInstall'); const butInstall = document.getElementById('butInstall'); window.addEventListener('appinstalled', () => { divInstall.classList.toggle('PWAhidden', true); deferredPrompt = null; console.log('PWA安装成功'); }); window.addEventListener('beforeinstallprompt', (event) => { event.preventDefault(); console.log('👍', 'PWA未安装'); window.deferredPrompt = event; divInstall.classList.toggle('PWAhidden', false); }); butInstall.addEventListener('click', async () => { console.log('👍', 'PWA用户点击'); const promptEvent = window.deferredPrompt; if (!promptEvent) { return; } promptEvent.prompt(); const result = await promptEvent.userChoice; console.log('👍', 'PWA用户选择'); window.deferredPrompt = null; divInstall.classList.toggle('PWAhidden', true); }); </script> <script src="https://www.xiufanliu.cn/usr/themes/MyLife/resource/public/fancybox.umd.js"></script> <script src="https://www.xiufanliu.cn/usr/themes/MyLife/resource/public/jquery.md5.min.js"></script> <script src="https://www.xiufanliu.cn/usr/themes/MyLife/resource/public/lazysizes.min.js"></script> <script src="https://www.xiufanliu.cn/usr/themes/MyLife/resource/public/OwO.min.js"></script> <script src="https://www.xiufanliu.cn/usr/themes/MyLife/resource/public/clipboard.min.js"></script> <script>var clipboard = new ClipboardJS('.cat_copy');</script> <script src="https://www.xiufanliu.cn/usr/themes/MyLife/resource/js/article.js"></script> <script src="https://www.xiufanliu.cn/usr/themes/MyLife/resource/js/main.js"></script> <script src="https://www.xiufanliu.cn/usr/themes/MyLife/resource/js/other.js"></script> <script src="https://www.xiufanliu.cn/usr/themes/MyLife/resource/js/pages.js"></script> <script src="https://www.xiufanliu.cn/usr/themes/MyLife/resource/js/comment.js"></script> <script src="https://www.xiufanliu.cn/usr/themes/MyLife/resource/prism/prism.js"></script> <script src="https://www.xiufanliu.cn/usr/themes/MyLife/resource/public/instantpage.js" type="module"></script> <script src="https://www.xiufanliu.cn/usr/themes/MyLife/resource/public/jBox.all.min.js"></script> <script src="https://www.xiufanliu.cn/usr/themes/MyLife/resource/public/viewhistory.js"></script> <script src="https://www.xiufanliu.cn/usr/themes/MyLife/resource/public/fanyi_2.js"></script> <script> function do_latex() { } do_latex(); </script> <script> $(document).on('click','.cat_post_top_video_items .item',function() { var url = $(this).attr('video_url'); var type = $(this).attr('video_type'); $('.cat_post_top_video_items .item_on').removeClass('item_on'); $(this).addClass('item_on'); if(type == 'bilibili'){ url = 'https://www.bilibili.com/blackboard/html5mobileplayer.html?bvid='+url+'&page=1&as_wide=1&danmaku=0&hasMuteButton=1'; }else if(type == 'movie-2'){ url = 'https://www.xiufanliu.cn/usr/themes/MyLife/api/DPlayer.php?url='+url; } $('.post_title_area_top cat_article_video iframe').animate({opacity:"0"},function(){ $(this).attr('src',url).on('load',function(){ $(this).animate({opacity:"1"}); }); }); }); function OWO() { if($(".OwO_1").length>0){ var OwO_1 = new OwO({ logo: '<i class="ri-emotion-happy-line"></i>', container: document.getElementsByClassName('OwO_1')[0], target: document.getElementsByClassName('OwO-textarea')[0], api: 'https://www.xiufanliu.cn/usr/themes/MyLife/stickers/OwO.json', position: 'up', width: '100%', maxHeight: '300px' }); } if($(".OwO_2").length>0){ var OwO_2 = new OwO({ logo: '<i class="ri-emoji-sticker-line"></i>', container: document.getElementsByClassName('OwO_2')[0], target: document.getElementsByClassName('OwO-textarea')[0], api: 'https://www.xiufanliu.cn/usr/themes/MyLife/stickers/OwO_2.json', position: 'up', width: '100%', maxHeight: '300px' }); } } OWO(); function reloadJlViewHistory() { if($('#jl_viewHistory').length > 0){ jl_viewHistory({ limit: 5, storageKey: 'jl_viewHistory', primaryKey: 'url', addHistory: true, titleSplit: '|' }); } } $(function() { reloadJlViewHistory(); var date = new Date(); date.setTime(date.getTime()+(86400000)); document.cookie = "welcome=true;path=/;expires="+date.toGMTString(); var maxTime = 600; var time = maxTime; $('body').on('keydown mousemove mousedown', function(e) { time = maxTime; }); var intervalId = setInterval(function() { time--; if (time <= 0) { ShowInvalidLoginMessage(); } }, 1000); function ShowInvalidLoginMessage() { $('.cat_topimg').css('top','0'); $('body').css('overflow-y','hidden'); } var pageTitle = jQuery(document).find("title").text(); jQuery(window).blur(function() { jQuery("title").text("啥也看不见"); }); jQuery(window).focus(function() { jQuery("title").text(pageTitle); }); }); </script> <script> $(function(){ let previousContent = ''; document.addEventListener("copy", handleCopy); function handleCopy(event) { const text = window.getSelection().toString(); if (text !== previousContent) { jbox_alert('blue',"复制成功！转载请务必保留原文链接!"); } previousContent = text; } }); </script> <script> function cat_user_pjax_callback() { } cat_user_pjax_callback(); </script> <script src="https://www.xiufanliu.cn/usr/themes/MyLife/resource/public/pjax.js"></script> <script src="https://www.xiufanliu.cn/usr/themes/MyLife/resource/js/pjax.js"></script> </div> </body> </html>