vue中子路由跳转父组件不跟着刷新怎么办

一般用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左边的三根短横线组成的按钮初始效果如下：

QQ图片20171220135951.png

点击该按钮时效果如下：

QQ图片20171220140126.png

此时页面主体显示的都是路由。此时，点击某个路由（注意地址栏的变化）,效果如下：

QQ图片20171220140345.png

注意看哦，路由变化了，但是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也随之自动恢复到了初始状态。此时此刻，落落心里那个高兴呀，特有成就感！
那友友们在写项目时有没有遇到过这样的情况呢？希望落落的分享对你有帮助哦！