代码结构:首先HeaderNav组件是被单独拎出来的,router-view中就对应了内容组件,由于有时候i有的界面的header内容是不一样的,因此要用到兄弟组件的相互通信,这个时候我首先选择了bus[中央事件总线]
<div class="" v-if="!showScan"> <HeaderNav/> <router-view/> </div>
问题描述:就是在页面上用按钮点击切换路由的时候了,header是可以正常切换的,但是如果是地址栏上直接输入路由进入的时候了,就驴头不对马口了。
HeaderNav.vue中逻辑代码
methods: { ..... watchChangeHeader () { this.bus.$on(‘changeHeader‘, info => { debugger if (info) { setInStorage(‘headerLag‘,info.headerLag) this.headerLag = info.headerLag setInStorage(‘title‘,info.title) this.title = info.title } else { this.headerLag =‘‘ setInStorage(‘headerLag‘,‘‘) } }) } ..... }
mounted () { this.watchChangeHeader() },
内容组件的逻辑代码:
created () { console.log(‘framework created‘) this.bus.$emit(‘changeHeader‘,‘‘) }
以上只是代码片段....
首先要进行科普下:
1)$emit时,必须已经$on,否则将无法监听到事件,也就是说对组件是有一定的同时存在的要求的
这个可能就是问题的原因,问题就是在一个组件$emit()的时候,他的兄弟组件并没有$on(),这就无法导致能够响应,因此我就改了下代码,将HeaderNav.vue,果然问题解决了。。。
created() { this.watchChangeHeader() },
但是我还有一个疑问???为什么页面点击按钮切换路由是正确的,但是直接输入路由就不行啦?????
经过一翻手动验证,发现了这一问题的原因。在页面点击按钮切换路由的时候,我们重新渲染的只是<router-view />这个路由组件对应的内容,由于HederBNav这个组件一直存在不会重新的created,mounted,意思就是说在嫩内容组件$emit的时候,HeaderNav组件的$on一直存在,所以没问题。但是如果我们直接地址栏上输入路由地址进行页面切换,本质上已经不是单页面了,这会造成整个代码会重新加载运行,这个时候在内容组件created()发出$emit(),HeaderNav还没有被挂在完成(mounted),也就不存在$on,所以就会有问题。
原文地址:https://www.cnblogs.com/evaling/p/9192728.html