Business needs: The method in the aside-left component should be called in the router-view component of the route exit.
Sort out the relationship:
The relationship between aside-left component and router-view is the relationship of sibling components;
router-view and its exit components can actually be regarded as parent-child components;
to sum up:
Calling methods between sibling components: the
component is represented by ref ==> this.$refs.child1Container.selectZonghenengli();
Overall structure:
<template>
<el-container class="layout_container">
<el-header height="auto"
><header-top :show="manage" :username="name"></header-top
></el-header>
<el-container>
<el-aside width="auto"
><aside-left @menuSlect="menuSlect" ref="child1Container"></aside-left
></el-aside>
<el-main>
<router-view :asideNav="navItem" @tiaozhuan="tiaozhuan"></router-view>
</el-main>
</el-container>
</el-container>
</template>
<script>
import HeaderTop from "../../components/layout/header";
import AsideLeft from "../../components/layout/aside";
import {
getuserInfo } from "@/api/login";
export default {
components: {
HeaderTop,
AsideLeft,
},
data() {
return {
//是否显示能力图谱管理按钮，以及获取用户信息
manage: null,
name: null,
//导航项
navItem: null,
};
},
created() {
this.getRoleInfo();
},
methods: {
//获取个人信息，渲染header
async getRoleInfo() {
const {
data: resolve } = await getuserInfo();
console.log(resolve);
this.name = resolve.name;
if (resolve.roleId == 1) {
this.manage = true;
} else {
this.manage = false;
}
},
//传递asider的导航
menuSlect(data) {
// console.log(data)
this.navItem = data;
},
//重点看这里：此处是监听路由出口，出口组件中的方法//
tiaozhuan() {
/触发兄弟组件的方法///
this.$refs.child1Container.selectZonghenengli();
},
},
computed: {
},
};
</script>
<style scoped>
</style>
aside-left component:
<template>
<div class="aside_container">
<el-menu
@select="selectedMenu"
>
<el-menu-item v-for="(item,i) in asideNav" :key="i" :index="i+''"
:class="item.type == selectNav ? 'active' : '' "
@click="selectedMenuItem(item.type)"
>
<img :src="item.type == selectNav ? require(`../../assets/aside/${item.src.active}.png`) : require(`../../assets/aside/${item.src.def}.png`)" alt="" />
<span slot="title">{
{
item.title}}</span>
</el-menu-item>
</el-menu>
</div>
</template>
<script>
export default {
data() {
return {
asideNav: [
{
title:"综合能力",type:"zonghe",src:{
def: "zonghe",active:"zongheactive"}},
],
selectNav: null
};
},
created() {
//保存激活的选项
if(!window.sessionStorage.getItem('selectNav')) {
window.sessionStorage.setItem('selectNav','zonghe')
};
this.selectNav = window.sessionStorage.getItem('selectNav');
this.$emit("menuSlect",this.selectNav)
},
methods: {
selectedMenu(key, keyPath) {
},
selectedMenuItem(type) {
window.sessionStorage.setItem('selectNav',type)
this.selectNav=type
this.$emit("menuSlect",this.selectNav)
},
///所要调用的方法//
selectZonghenengli() {
this.selectNav="ruanjian"
this.$emit("menuSlect",this.selectNav)
window.sessionStorage.setItem('selectNav',"ruanjian")
}
},
computed: {
},
};
</script>
<style scoped>
</style>
Route export components:
this.$emit('tiaozhuan');
Feel free to send private messages to discuss issues together