第一个bug

114 阅读1分钟

今天在做一个项目,我想一个home页面跳转到另一个search页面的时候,这个三级菜单进去的时候是隐藏起来的。

image.png

image.png

思路很简单,给这个三级菜单设置一个Show布尔值,true的时候显示,false的时候隐藏。 那么如何判断显示与隐藏,也很简单,根据这个页面的URL地址(也就是router地址)来控制, 当this.route.path==/home的时候,Show=true显示,this.route.path == '/home'的时候,Show = true 显示,当this.route.path == '/search'的时候,Show = false 隐藏起来,但是,实现的时候总是不行,排查了很多方面还是没有头绪! 于是,我注意到,点击这个三级菜单和搜索框中的内容,是会把参数一起传给路由,也就是路由的动态参数, 点击菜单的时候,传递的是query参数,而搜索框中的内容为params参数,这里需要注意的是,query参数是直接拼接在URL的值的后面,也就是“?”的一串字符串,例如:bing.cn?name='zs'&age=20, 而params参数是直接拼接在URL地址中的。例如:https://baidu/keyword, 这个keyword就是params ,也就是说params会改变路由的地址,导致点击搜索框路由跳转的时候,实际的路由地址已经改变为如下

image.png

导致无法判断为search 界面,也就无法正确显示三级菜单, 解决方案就是:当路由的地址不是home界面的时候,三级菜单隐藏即可,也就是:this.$route.path !== '/home'的时候,this.show = false

关键点在于params会改变路由的路径!