解决Vue-iview封装导航栏刷新，导航栏消失之坑

ACb0y 发布于2019-08-26 10:19 / 3147人阅读

摘要：前言记录一次跳转路由时，导航栏选中消失的神秘事件。事情原图请看这张图，一开始路由跳转到这页面时，导航栏是有高亮的，但是在刷新的时候，高亮就消失了总所周知，客户是一种可以从鸡蛋里面挑出骨头的神秘生物。

1.前言

记录一次跳转路由时，导航栏选中消失的神秘事件。

2.事情原图

请看这张图，一开始路由跳转到这页面时，导航栏是有高亮的，但是在刷新的时候，高亮就消失了；
总所周知，客户是一种可以从鸡蛋里面挑出骨头的神秘生物。

3.康康代码

页面代码

逻辑代码

props: {
    collapsed: {
      type: Boolean,
      default: false
    },
    menuList: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    handleSelect(name) {
      this.$router.push({ name: `${name}` });
    }
  }

上述代码是我封装到公共组件的导航栏代码，主要是判断是否有多级菜单（这不是我们重点）。

4.解答

遇到问题就要解决，不懂的情况下，只好上网找答案了，但是网络上的答案五花八门，看的你眼花缭乱。
最后还是靠自己摸索了

首先我的路由给需要跳转的页面都会加上name值，当然也有些页面不需要name值，跳转的方式是this.$router.push();

iview官网有提供一个参数，active-name，这个就好像css里面的active，可以选中指定的菜单

在封装的组件页面

绑定当前要指定的菜单

这里要用到mounted生命周期，在页面渲染后得到导航栏的name值，网上说还要用updated这个生命周期，其实不需要；

点击跳转的时候，跳到与路由name值相同的页面

详细代码：

//template
    
    // XXXX
    
//script
  data() {
    return {
      isShow: "test-group"
    };
  },
  props: {
    collapsed: {
      type: Boolean,
      default: false
    },
    menuList: {
      type: Array,
      default: () => []
    }
  },
  mounted() {
    this.isShow = this.$route.name;
  },
  methods: {
    handleSelect(name) {
      this.isShow = name;
      this.$router.push({ name: `${name}` });
    }
  }

这样就可以解决上述的问题了，其中有些地方说不清的地方请见谅，只是记录自己开发时粗心的一面，菜鸟一枚，不喜勿喷！

GPU云服务器云服务器导航栏导航栏按钮 iOS导航栏导航栏html

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/105989.html

加推Weex实践之路（上）

摘要：我们参考小程序的设计思路进行了优化升级，为每一个需要特有化配置的页面添加一个格式的配置文件，配置文件包括导航栏的配置页面级别的配置跳转的配置等，将配置工程化标准化。设置导航栏按钮包含按钮样式的数组通过完成按钮事件的回调。一、背景1.为什么是Weex在公司快速发展的大环境下，App的更新迭代高速、高频，技术团队平均两周便可诞生一款中型App，但App团队只有6个人（iOS 、Android各3...

shuibo 2019-05-22 19:43 评论0 收藏0
Android仿饿了么首页导航栏（ViewPager）

摘要：需求分析在饿了么首页中我们能看到这样的布局如下图。导航点是使用文件画的，灰色为未选中，绿色为选中。因为默认显示的是第一页，所以我们默认第一个的导航点是选中的。 1、需求分析在饿了么首页中我们能看到这样的布局（如下图）。红框内是一个可以左右滑动的页面，每一个页面类似于九宫格，都有可供点击图标。对于这样的布局，我在网上找了很久都没有找到相关的名称，所以我这里暂时叫它导航页吧。showIm...

lufficc 2019-08-14 18:39 评论0 收藏0