动态获取菜单栏时-面包屑导航-的处理一

情况描述

这是一个左右布局的系统,左侧aside里调用封装好的navicate组件做菜单栏,右侧main里,分为上下结构,上部调用通用的header组件来展示用户信息和面包屑导航,下部处理业务逻辑。 但是面包屑导航的处理很棘手,navicate组件肯定是异步向服务器发送请求来获取需要展示的栏目列表,而navicate组件点击事件要和面包屑导航同步交互,中间跨着一个container组件,所以我想到了 下面这几种通讯方法。

想到的几种方式

  • 1.通过vuex
  • 2.通过localstorage
  • 3.通过$route

通过vuex

想了想,用vuex通讯,有点很明显,就是可以即时通讯,实时渲染,但是有一个致命缺点,就是怕刷新。我们知道,vuex是放在js缓存里的,如果页面一刷新,什么都没了。这太恶心了。在 手机端,这个问题还没有那么明显,但是放到pc端,刷新页面是很常用的操作,所以这个有点不靠谱

通过localstorage

在localstorage里共享变量,也是个解决思路。但是问题就是,我要单向的去获取,因为localstorage不会给我们推送数据。这个方法的优点是可以永久保存不怕刷新。缺点就是获取变量太麻烦,首先要自己封装设置和获取方法, 然后把navicate获取的数据写到localstorage里面,然后切换页面的时候,我要通过$route判断当前是哪个页面,然后再去localstorage把相关数据拿出来。

通过$route

通过$route获取,就是把参数放在url上,能确保数据可以获取到,数据获取也比较方便,监听路由变化就可以直接修改面包屑导航的值。但问题是,如果我直接输入url的时候没有输入参数,那面包屑导航是没有的。 还有一个问题就是,如果我并不是只有用navicate做页面见的跳转,其他地方想调到这个页面,我是不知道要在$route里传入什么参数的。

问题总结解决

随机浏览