一般用vue开发的都是单页面应用程序。在使用路由插件vue-router时，我们经常利用子路由的跳转实现部分数据的更新。但是，有时候呢，我们是希望子路由跳转时页面的所有组件都刷新的。
举个例子：
在容器元素中，header是公用的，而且header里的某个按钮在不同情况下样式也不一样；页面的主体部分由路由跳转实现切换；在页面切换时，我们希望header里该按钮的样式恢复到页面最初打开时的样式。
代码如下：
html部分
<header>
<div class="container">
<div class="visible-xs-block row">
<div class="col-xs-3">
<button type="button" class="mobilemenu-toggle collapsed" @click="showmobilemenu()" v-show="mobilebtn">
<span class="icon-bar top-bar"></span>
<span class="icon-bar middle-bar"></span>
<span class="icon-bar bottom-bar"></span>
</button>
<span class="closemenu" v-show="closemenu" @click="closemobilemenu()">X</span>
<ul class="mobilemenu" v-show="mobilemenu">
<li v-for="item in mobmenu" class="navitem">
<router-link :to="'/'+item" class="text-left navlink" tag="div">{{item}}</router-link>
</li>
</ul>
</div>
<div class="col-xs-6 text-center">
<router-link to="/home" class="smooth-scroll-link"></router-link>
</div>
</div>
</div>
</header>
css部分：
header .row{
height: 50px;
position: relative;
}
header .row .mobilemenu-toggle{
margin-top: 15px;
cursor: pointer;
width: 28px;
height: 17px;
border:none;
background-color: transparent;
}
header .row .mobilemenu-toggle .icon-bar{
display: block;
width: 16px;
height: 2px;
border-radius: 2px;
margin-top: 3px;
background: #fff;
margin-left:6px;
}
header .row .closemenu{
position: relative;
left: 2px;
top: 15px;
font-size: 20px;
line-height: 20px;
color:#fff;
}
header .row .mobilemenu{
background:#333;
position:absolute;
width: 100%;
height: 100%;
top:50px;
left:0px;
color:#333;
background:#fff;
padding-left:100px;
}
header .row .mobilemenu .navitem{
padding-left:50px;
height: 50px;
line-height: 50px;
font-size: 24px;
}
header .row .mobilemenu a{
color:#fff;
}
header .row .mobilemenu a:hover{
text-decoration: none;
}
js部分：
var app=new Vue({
el:"#myosmo",
data:{
menu:["CodingJam","myWords","Forums","SignIn"],
mobmenu:["CodingJam","myWords","Forums","help","CreateAccount","SignIn"],
mobilemenu:false,
mobilebtn:true,
closemenu:false
},
methods:{
showmobilemenu:function(){
this.mobilemenu=true;
this.mobilebtn=false;
this.closemenu=true;
},
closemobilemenu:function(){
this.mobilemenu=false;
this.mobilebtn=true;
this.closemenu=false;
}
},
router:router
})
header左边的三根短横线组成的按钮初始效果如下：
点击该按钮时效果如下：
此时页面主体显示的都是路由。此时，点击某个路由（注意地址栏的变化）,效果如下：
注意看哦，路由变化了，但是header部分样式并没有跟着刷新，没有像落落希望的那样恢复到为点击时的样式。尤其是header里的路由菜单mobilemenu设置了特殊样式，给人一种路由跳转页面却没有刷新的错觉。
体验很差对吧？糟糕极了！
怎样在路由跳转时header部分的样式自动恢复到初始状态呢？落落想了很久怎样解决这个问题。
在methods中写一个方法？显然不行，给元素绑定事件后事件基本都要手动执行，也就是先页面跳转再手动执行，如果不手动执行就还是停留在图片二的状态，根本就没有解决问题。
混乱中在网上搜索了半天，也没有找到合适的解决办法。
想呀想，想到了用watch监测路由变化。之前在项目中用过，解决的是子路由变化模板（子组件的模板）数据不更新的问题。这里要解决的是子路由跳转父组件不刷新的问题，能行吗？
死马当活马医，试试再说。于是落落在js文件中添上了如下这段代码：
watch:{
$route(now,old) {
if(now.path!="/myosmo") {
this.mobilemenu=false;
this.mobilebtn=true;
this.closemenu=false;
}
}
}
呵呵，问题居然真的就这样解决了。当mobilemenu展开时，直接点击路由跳转页面，header也随之自动恢复到了初始状态。此时此刻，落落心里那个高兴呀，特有成就感！
那友友们在写项目时有没有遇到过这样的情况呢？希望落落的分享对你有帮助哦！
