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

最新推荐文章于 2024-07-25 11:21:59 发布

肖肖肖丽珠

最新推荐文章于 2024-07-25 11:21:59 发布

阅读量447

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/qq_33769914/article/details/82843361

版权

本文介绍如何在页面中实现头部选择校区后，中间内容区域实时更新为对应校区的信息。通过在顶部选择不同的校区，页面使用路由改变中间内容，同时利用`localStorage`存储选定的校区ID，确保子页面能获取到正确数据。

摘要由CSDN通过智能技术生成

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

但是我的页面是有一个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