美文网首页
关于element-ui navMenu不选中问题

关于element-ui navMenu不选中问题

作者: 热心市民萝卜先生 | 来源:发表于2020-06-23 12:55 被阅读0次

    导航菜单刷新一直不显示选中高亮,点击时候会高亮,进入页面却不会高亮,设置 :default-active 根本不起作用,现在解决掉BUG决定写此文加强记忆(下面这段代码就是bug代码):

    vue-router中关于 $route || $router的区别:
    1.this.router:表示全局,是router构造方法的实例。 2.this.route:表示的是当前页面的路由信息:

    所以 :default-active="$router.path" 的写法是不可能拿到路径的!!!!

    千万要注意,是 :default-active="$route.path" ,这里不能写成router。

    //错误示范
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" active-text-color="#409EFF" @select="handleSelect">
        <el-menu-item index="/">首页</el-menu-item>
        <el-menu-item index="/func">功能</el-menu-item>
        <el-menu-item index="/custom">定制</el-menu-item>
        <el-menu-item index="/navMenu">帮助</el-menu-item>
    </el-menu>
    
    //正确操作
    <el-menu :default-active="$route.path" router class="el-menu-demo" mode="horizontal" active-text-color="#409EFF" @select="handleSelect">
        <el-menu-item index="/">首页</el-menu-item>
        <el-menu-item index="/func">功能</el-menu-item>
        <el-menu-item index="/custom">定制</el-menu-item>
        <el-menu-item index="/navMenu">帮助</el-menu-item>
    </el-menu>
    

    结尾彩蛋:多次点击会报错

    //解决方案
    //在router.js文件加入,就饿可以完美的解决
    const originalPush = VueRouter.prototype.push
    VueRouter.prototype.push = function push(location) {
      return originalPush.call(this, location).catch(err => err)
    }
    
    

    相关文章

      网友评论

          本文标题:关于element-ui navMenu不选中问题

          本文链接:https://www.haomeiwen.com/subject/wpocfktx.html