情况一:单个菜单页面刷新导航失去高亮;(如下图这种菜单类型) 问题是elementUI的el-menu组件提供了一个默认高亮的属性default-active,当页面刷新后default-active的值就会成为默认给的值,解决这个只用取出当前页的路由然后赋值给activeIndex即可,代码如下: <el-menu :default-active="activeIndex" mode="horizontal" :ro...
<el-menu :default-active=‘$route.path‘ :router=‘true‘ :unique-opened=‘true‘ :default-openeds="defaultOpeneds"background-color="#bd1e22"text-color="#fff"active-text-color="#ffd04b">//router当导航激活时允许以index作为路由进行页面的跳转,$route.path当前路由对象的路径,字符串,绝对路径/...
一、菜单项激活状态保持 二、实现页面的路由刷新(局部刷新)
1、直接一行代码: <el-menu :default-active="$route.path"></el-menu> 2、稍微麻烦一些: (1)、<el-menu> 设置属性 :default-active="activeIndex" (2)、watch方法检测路由变化 (3)、created生命周期设置路由 具体代码如下: <template> <div id="app"> <el-menu :default-active="activeIndex" backgr...
1、如果给default-active设置一个默认值,那么刷新页面时,会出现一个问题,即路由地址和菜单对应的index是不一致的。 <el-menu routerdefault-active="/"background-color="#545c64"text-color="#fff"active-text-color="#ffd04b"> image.png 如上图所示,当前页面应该是数据分析,路由地址是/analyse,但是刷新页...
当页面刷新时,Vue组件的生命周期会重新开始,所有基于Vue的数据绑定和状态管理都会被重置。因此,el-menu组件中的选中状态(如果是通过Vue的数据属性控制的)也会在刷新后丢失。 3. 查找或设计解决方案来保持el-menu的选中状态 为了保持el-menu的选中状态在刷新后不变,我们可以考虑以下几种方案: ...
在el-menu组件里有这样一个属性， default-active 用来表示当前激活菜单的 index 1、如果给 default-active 设置一个默认值，那么刷新页面时，会出现一个问题，即 路由地址和菜单对应的index是不一致的 。如上图所示，当前页面应该是数据分析，路由地址是/analyse，但是刷新页面之后，菜单栏却变成了...
使用element-ui的el-menu导航选中后刷新页面保持当前选中状态 使⽤element-ui的el-menu导航选中后刷新页⾯保持当前选中状态 具体代码如下所⽰：<el-menu :default-active=‘$route.path‘ :router=‘true‘ :unique-opened=‘true‘ :default-openeds="defaultOpeneds" background-color="#bd1e22" tex...
问题描述:点击页面1的注册消息按钮跳转到页面2,左边的el-menu一直保持当前选中状态,且点击刷新时,页面也保持当前状态 页面1 页面2 解决方案: 1.在配置路由的时候,设置meta属性,把同一el-menu-item下的页面设置成相同的值.也考虑过把name设置成相同的值,但是显然不行,浏览器会报路由名字相同的警告 ...
vue+el-menu实现路由刷新和导航栏菜单状态保持（局部刷新页⾯）⼀、菜单项激活状态保持 有时，我们在项⽬中会有这样⼀个需求，即实现 ⼀个侧导航栏，点击不同的菜单项，右边内容会跟着变化，⽽页⾯⼿动刷新后想要使菜单激活状态保持，那么这个功能该如何实现呢？现在给出以下解决办法：即加上这样⼀...