脚本宝典收集整理的这篇文章主要介绍了

vue-router 实现无效路由(404)的友好提示

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <p>最近在做一个基于<code>vue-router</code>的<code>SPA</code>,想对无效路由(404)页面做下统一处理。<br />这次我真的没有在<a href="https://router.vuejs.org/en/" rel="nofollow noreferrer" target="_blank">官方文档</a>找到具体的说明[捂脸]<br />所以本文仅是我DIY的一个思路,求轻虐=_=</p> <p>在我的理解中,<code>vue-router</code>是根据<code>path</code>去匹配注册的<code>route</code>,匹配到则加载对应的组件,匹配不到则重置(或者说清空)对应的<code>router-view</code>。<br />所以,我们不做处理的话,最终页面展示的是一片空白。<br />那么,我们是不是可以在路由匹配上做文章呢?</p> <h3 id="articleHeader0">路由监测</h3> <p>在组件中,可以从<code><a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.$route</code>获取当前路由,那么就可以使用<code>watch</code>监测路由的变化,监测所有路由变化自然而然的落在<strong>根路由组件</strong>(如:<code>App.vue</code>)上面了。</p> <h3 id="articleHeader1">无效路由检测</h3> <p><code>$route.matched</code>包含了当前路由的匹配结果,如果为空则说明当前路由无效。</p> <h3 id="articleHeader2">界面提示</h3> <p>可使用条件渲染,路由有效则渲染<code>router-view</code>,路由无效则渲染提示信息。</p> <h3 id="articleHeader3">Demo</h3> <p><code>App.vue</code></p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<template></p> <p v-if=&quot;invalidRoute&quot;>404</p> <p> <router-view v-else></router-view><br /> </template></p> <p><script type=&quot;text/babel&quot;> <a href="http://www.js-code.com/tag/export" title="export" target="_blank">export</a> default { name: 'App', computed: { invalidRoute () { return !<a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.$route.matched || <a href="http://www.js-code.com/tag/this" title="浏览关于“this”的文章" target="_blank" class="tag_link">this</a>.$route.matched.length === 0; } } }; </script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code class="vue"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">v-if</span>=<span class="hljs-string">"invalidRoute"</span>&gt;</span>404<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">router-view</span> <span class="hljs-attr">v-else</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">router-view</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/<a href="http://www.js-code.com/tag/babel" title="浏览关于“babel”的文章" target="_blank" class="tag_link">babel</a>"</span>&gt;</span><span class="javascript"> <span class="hljs-keyword"><a href="http://www.js-code.com/tag/export" title="浏览关于“export”的文章" target="_blank" class="tag_link">export</a></span> <span class="hljs-keyword">default</span> { <span class="hljs-attr">name</span>: <span class="hljs-string">'App'</span>, <span class="hljs-attr">computed</span>: { invalidRoute () { <span class="hljs-keyword">return</span> !<span class="hljs-keyword">this</span>.$route.matched || <span class="hljs-keyword">this</span>.$route.matched.length === <span class="hljs-number">0</span>; } } }; </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> <blockquote><p>至于404要多友好就看自己了[惹不起]</p></blockquote> <p></code></p>

总结

以上是脚本宝典为你收集整理的

vue-router 实现无效路由(404)的友好提示

全部内容,希望文章能够帮你解决

vue-router 实现无效路由(404)的友好提示

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过