vue刷新页面侧边栏，保持原来位置高亮

element ui 刷新后对应侧边栏高亮

vuex在刷新页面时保持数据不变 created(){ //在页面加载时读取sessionStorage里的状态信息 this.$store.state.userInfo = window.sessionStorage.getItem("userInfo") //在页面刷新时将vuex里的信息保存到sessionStorage里 window.addEventListener("beforeunload", () => { window.sessionStora

<template> <div> <el-menu :default-active="activeIndex" router class="el-menu-vertical-demo" @select="handleSelect" background-color="#545c...

我们在利用Vue写后台管理系统时，对于导航栏我们需要保持其处于选择的高亮状态，大概要经过如下三个步骤： 为所需要的点击的二级菜单栏设置点击事件，把对应的index值保存在sessionStorage中 当页面刚被刷新创建时，将sessionStorage中的值取出来赋值给菜单栏进行激活 点击每一个二级菜单栏时，要给activePath重新赋值 下面来看一下具体的实现过程： 1.为二级菜单栏绑定点击事件saveNavState 2.把对应的index值保存在sessionStorage中 saveNav

Element-UI 侧边栏高亮一、出现场景二、解决办法1. F5 刷新高亮问题2. 前进后退后高亮不同步问题 一、出现场景 在使用 Element-UI 的侧边导航栏时我遇到了两个问题： 按 F5 刷新页面后，导航栏默认折叠起来，并且无高亮显示 点击浏览器的前进后退按钮后，高亮显示与页面内容不同步 下面我就这两个问题给出自己的解决办法。 二、解决办法 1. F5 刷新高亮问题 原理：当地址栏发生变化时，修改改变默认显示高亮的值。 首先给导航栏加上 default-active 属性，记得加上冒号。

1本人在学vue项目时遇到一个坑、在写vue项目头部导航时，比如点击第三个，刷新后，高亮状态显示在第一个： 现在是点击第三个页面 刷新后，是第一个页面高亮显示，但是因为路由路径没有改变页面内容还是第三个页面内容，改变的是导航的状态； 捯饬了好久才搞出来，伤的不轻，看控制导航状态的代码部分； 在头部组件里面控制导航菜单高亮显示是checkindex,默认值是0，触发点击事件contact时候会...

需求描述： 如下图，可收缩、可展开的侧边导航栏，当收缩时，鼠标悬停在一级菜单时，出现二级菜单。 解决方法： 设置标志【isCollapse】来控制展开和收缩图标的显示，当【isCollapse=true】时，侧标导航栏收缩，且标题“通讯录管理”不显示。当【isCollapse=false】时，侧标导航栏展开，且标题“通讯录管理”显示。 在展开和收缩...

当用户访问‘/about’时，$route.path将为'/about'。当用户访问‘/’时，$route.path将为'/'。

问题： 在页面上点击时，高亮会变但是在后天用代码的话就不会变。 this.$router.push({ name: "write" }); 用这段代码高亮不会改变。 原因： 因为没有改变导航栏的 default-active （当前激活菜单的 index）。因为你用代码进行了改变，但是没有改变default-active的值。所以高亮不会改变。 解决： 每次变换路径时，进行刷新default-active。用监听器监听。 定义一个数据 定义函数handleSelect .

解决公共页面路由跳转刷新高亮丢失问题

https://www.cnblogs.com/liuqin-always/p/11603708.html

以上两个功能代码要结合使用，如果只使用点击功能则需要在父组件中修改selectedAnchor 的值。②在父组件中接收子组件传递的参数，并使用scrollIntoView实现锚点功能。①首先让元素默认选中第一个，在父组件中设置一个字段表示选中第几个。①在子组件中添加点击事件，通过$emit将参数传给父组件。到此为止以上代码实现了滚动自动选择菜单的功能。③在子组件中接收并使用。④在父组件编写功能代码。②将该值传递给子组件。

vue如何在页面刷新时保留状态信息 本篇转载至来自简书，仅供自己学习用。 1、通过本地存储 state中的数据，页面刷新成功后再次从本地存储中读取state数据 // vuex中的数据发生改变时触发localStorage的存储操作 localstorage.setItem('state', JSON.stringify(this.$store.state)) // 页面加载的时候在created中获取本地存储中的数据 localStorage.getItem('state') &&

//在页面加载时读取sessionStorage里的状态信息 if (sessionStorage.getItem("store") ) { this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(sessionStorage.getItem("store")))) } //在页面刷新时将vuex里的信息保存到sessionStorage里 window.addEventLi.

需要实现一个类似微信聊天记录的功能，其中碰到一个问题：下拉加载下一页数据时，将请求到的数据放到原数组前面，这时候vue会自动重新渲染页面，页面会回到顶部，这并不是我要的效果。 实现思路： 1、首先，要实现让页面到某个位置，需要用到scrollTop属性； 2、然后就需要计算scrollTop的值为多少，则滑动多少距离； 3、计算滑动距离的思路：既然需要停留在当前位置的话，那么正常思考的话就是需要知道加载的这一页数据所占的高度，然后将scrollTop值设置为这个高度即可，但这里有个问题，即便每次加载