如何在主页面操作数据时子页面的也作出改变。

想实现的功能是我切换顶部的校区下面的内容就变成了相应的校区的内容。

但是我的页面是有一个home页面构成，它包含上部左边都是固定的，只有中间的内容根据router改变。

<template>
    <el-row class="container">
        <el-col :span="24" class="header">
            <el-col :span="10" class="logo" :class="collapsed?'logo-collapse-width':'logo-width'" @click.native="goMain">
                { {collapsed?'':sysName}}
            </el-col>
            <el-col :span="10">
                <div class="tools" @click.prevent="collapse">
                    <i class="fa fa-align-justify"></i>
                </div>
            </el-col>
            
            <el-col :span="3" class="userinfo">
                <el-dropdown trigger="hover">
                    <span class="el-dropdown-link userinfo-inner">
                        <img :src="this.sysUserAvatar" /> { {sysUserName}}
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item @click.native="myhome">我的主页</el-dropdown-item>
                        <el-dropdown-item @click.native="user">个人信息</el-dropdown-item>
                        <el-dropdown-item @click.native="resetpassword">修改密码</el-dropdown-item>
                        <el-dropdown-item