美文网首页
ElementUI之NavMenu页面刷新保持刷新之前路由

ElementUI之NavMenu页面刷新保持刷新之前路由

作者: 皇甫贝 | 来源:发表于2019-12-02 14:35 被阅读0次

如果想刷新的时候是刷新点击的页面 可以用缓存记录刷新前的路由地址 然后刷新时设置默认地址为缓存的路由地址即可;
在ElementUI库中NavMenu组件 提供了router属性

<el-menu
    :default-active="$route.path"
    :unique-opened="true" 
    :router="true" 
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
     >
    <el-menu-item
         :index="itme.PTo"  
         v-for="(itme, index) in Path"
         :key="index"
      >
         {{ itme.name }}
     </el-menu-item>
 </el-menu>

注意:

  • el-menu组件中 :router="true" 是否使用 vue-router的模式,默认为false;启用该模式会在激活导航时以 index 作为 path 进行路由跳转 $route.path当前路由对象的路径,字符串,绝对路径
  • unique-opened只允许有一个下拉菜单处于打开的状态
  • 使用default-active来实现当前菜单激活的选项

相关文章

  • ElementUI之NavMenu页面刷新保持刷新之前路由

    如果想刷新的时候是刷新点击的页面 可以用缓存记录刷新前的路由地址 然后刷新时设置默认地址为缓存的路由地址即可;在E...

  • Router 原理及 React-Router

    页面路由(浏览器路由) 页面会刷新 hash路由 页面不会刷新,之前做单页应用,使用的传统方法。 h5 路由 h5...

  • 前端路由

    什么是前端路由 前端路由的前生今世及实现原理 先有的SPA,页面内部交互无刷新,再到页面跳转也无刷新,因此路由出现了

  • 解决vue路由跳转页面不刷新的问题

    解决vue路由跳转页面不刷新的问题 通过路由传参跳转界面,页面没有刷新解决方法:在 router-view 中加 ...

  • vue router 路由专题

    一、前端路由前端路由的核心是改变url 但是页面不进行整体的刷新如何实现改变url 但是不刷新整个页面方法一:通过...

  • keepAlive使用方法

    vue单页面,多路由,前进刷新,后退不刷新 目的:vue-cli构建的vue单页面应用,某些特定的页面,实现前进刷...

  • nginx启动vue项目刷新页面404

    问题描述 vue单页面history路由模式项目部署上线之后, 刷新页面会跳到404页面 异常原因 页面刷新时会重...

  • vue 中刷新路由几种方法

    刷新路由有几种方式,都有各自的优缺点之前一直都是使用location.reload()来刷新页面,但在最近写代码中...

  • vue中的页面刷新问题

    刷新 1. 用vue-router重新路由到当前页面,页面是不进行刷新的 2.采用window.reload(),...

  • vue 动态增加路由

    /*页面刷新,继续路由*/ // if (JSON.parse(localStorage.getItem('rou...

网友评论

      本文标题:ElementUI之NavMenu页面刷新保持刷新之前路由

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