首页 > 其他 > 详细

vue监听事件的一个案例

时间:2021-06-16 14:37:31      阅读:16      评论:0      收藏:0      [点我收藏+]

项目布局结构:在APP.vue基础上,我添加了一个layout布局,分别放 顶部导航,侧边弹框和router-view渲染的界面,如下图所示:

技术分享图片

 

 现在说说我的问题:程序默认进入首页,想要在其他页面点击时重新跳转到首页,并且顶部导航左侧图标按钮变为返回箭头。为此,我设置this.$router.push()分别带入path和

query中定义的isBack变量,表示是从某个指定页面返回到了首页,根据isBack为true或false去显示左侧箭头。如下:
 
其他页面代码:
技术分享图片

 

 layout中代码:

技术分享图片

 

 原因:因为我现在写的导航是在layout布局中,layout布局 又分为顶部导航和侧边 导航两部分,所以上个页面传入的isBack变量,在layout中打印为undefined;路由跳转引起数据改变只能是页面中对应数据发生了变化,而顶部导航是在首页等这些页面以外的地方进行布局的,故只有刷新了才能拿到isBack变量的值。这样显然效果不太好。

那如何解决呢?

可以使用watch监听的办法,在layout中全局监听路由跳转,如果从上个页面跳转时带有isBack为true,则下个页面左上角应该是返回按钮,否则默认图标显示。

技术分享图片

 

 

 

 

 

 

vue监听事件的一个案例

原文:https://www.cnblogs.com/heisetianshi/p/14888891.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!