点击sign out：
此时拦截器里的输入参数semanticRoute是undefine状态：
：focus-within是一个伪类，在使用了 :focus-within 的元素成为焦点或它的子元素成为焦点时显现。
看个例子：
<html>
<style>
/*
A normal (though ugly) focus
pseudo-class.
所有位于my-element div的元素在收到focus时，
都会变成黄色背景
*/
.my-element *:focus {
background: yellow !important;
color: green;
}
/*
The :focus-within pseudo-class
will NOT style the elements within
the .my-element selector, like the
normal :focus above, but will
style the .my-element container
when its focusable children
receive focus.
*/
.my-element:focus-within {
outline: 3px solid red;
}
</style>
<div class="my-element">
<p>我所在的div class为my-element</p>
<p>所有位于my-element div的元素在收到focus时，都会变成黄色背景</p>
<p>
<a href="http://www.sap.com">
我的公司网站
</a>
</p>
<label for="jerryemail">
我的邮件地址:
</label>
<input type="email" id="jerryemail" />
</div>
</html>
.my-element类修饰的div本身不会成为焦点，除非给它设置tabindex属性。但当div容器内部的子元素，比如链接a或input元素，成为焦点时，通过:focus-within这个伪类，我们会看到div元素本身会出现一个3px的边线(border).
测试：
默认页面：
按了tab之后，因为div里的元素a处于focus状态，触发其父类的:focus-within
再按tab，焦点消失后，红色方框跟着消失：
更多Jerry的原创文章，尽在："汪子熙":
网友评论