想实现的功能是我切换顶部的校区下面的内容就变成了相应的校区的内容。
但是我的页面是有一个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 divided @click.native="logout">退出登录</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-col>
<el-col :span="3" class="zone" v-if="hasPower('010101')!=true"> <!--系统管理没有-->
<el-select v-model="zoneid" placeholder="请选择校区" @change="getSchool">
<el-option
v-for="item in schoolzone"
:key="item.zoneid"
:label="item.zonename"
:value="item.zoneid"
></el-option>
</el-select>
</el-col>
</el-col>
<el-col :span="24" class="main">
<aside :class="collapsed ? 'menu-collapsed':'menu-expanded'">
<!--导航菜单-->
<el-menu :default-active="$route.path" class="el-menu-vertical-demo" @open="handleopen" @close="handleclose" @select="handleselect"
unique-opened router v-show="!collapsed">
<template v-for="(item,index) in $router.options.routes" v-if="!item.hidden">
<el-submenu :index="index+''" v-if="!item.leaf">
<template slot="title"><i :class="item.iconCls"></i>{{item.name}}</template>
<el-menu-item v-for="child in item.children" :index="child.path" :key="child.path" v-if="!child.hidden">{{child.name}}</el-menu-item>
</el-submenu>
<el-menu-item v-if="item.leaf&&item.children.length>0" :index="item.children[0].path"><i :class="item.iconCls"></i>{{item.children[0].name}}</el-menu-item>
</template>
</el-menu>
<!--导航菜单-折叠后-->
<ul class="el-menu el-menu-vertical-demo collapsed" v-show="collapsed" ref="menuCollapsed">
<li v-for="(item,index) in $router.options.routes" v-if="!item.hidden" class="el-submenu item">
<template v-if="!item.leaf">
<div class="el-submenu__title" style="padding-left: 20px;" @mouseover="showMenu(index,true)" @mouseout="showMenu(index,false)"><i :class="item.iconCls"></i></div>
<ul class="el-menu submenu" :class="'submenu-hook-'+index" @mouseover="showMenu(index,true)" @mouseout="showMenu(index,false)">
<li v-for="child in item.children" v-if="!child.hidden" :key="child.path" class="el-menu-item" style="padding-left: 40px;" :class="$route.path==child.path?'is-active':''" @click="$router.push(child.path)">{{child.name}}</li>
</ul>
</template>
<template v-else>
<li class="el-submenu">
<div class="el-submenu__title el-menu-item" style="padding-left: 20px;height: 56px;line-height: 56px;padding: 0 20px;" :class="$route.path==item.children[0].path?'is-active':''" @click="$router.push(item.children[0].path)"><i :class="item.iconCls"></i></div>
</li>
</template>
</li>
</ul>
</aside>
<section class="content-container">
<div class="grid-content bg-purple-light">
<el-col :span="24" class="breadcrumb-container">
<strong class="title">{{$route.name}}</strong>
<el-breadcrumb separator="/" class="breadcrumb-inner">
<el-breadcrumb-item v-for="item in $route.matched" :key="item.path">
{{ item.name }}
</el-breadcrumb-item>
</el-breadcrumb>
</el-col>
<el-col :span="24" class="content-wrapper">
<transition name="fade" mode="out-in" >
<router-view v-if ="isRouterAlive"></router-view> //每次点击左边的菜单变化的内容时这里。给他加个v-if来实现刷新。
</transition>
</el-col>
</div>
</section>
</el-col>
</el-row>
</template>
export default {
data() {
return {
sysName:'',
collapsed:false,
sysUserName: '',
sysUserAvatar: '',
form: {
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: ''
},
schoolzone:[],
zoneid:'',
isRouterAlive:true ,
}
},
methods: {
reload () {
this.isRouterAlive = false;
this.$nextTick(() => (this.isRouterAlive = true))
},//获取校区
getSchool(){
sessionStorage.setItem('zoneidBig',this.zoneid);
this.reload();//从新加载页面},
....其他的就不写了
},
},
而在那个路由的页面直接获取到那个存在localstorage里面的数据然后内容获取到那个对应的校区的。