vue 导航栏刷新页面定位:

Posted 2020-10-13 Iven_Han

不想分析可以直接看解决方案

问题描述:
　　通过router的route-link可以实现导航栏的功能，并且可以跳转到相应页面
　　但是刷新页面导航栏没有定位到当前页面一栏.

问题分析:
　　定位导航栏步骤
　　　　1. 点击导航栏对当前一栏添加class
　　　　　　<a @click="toPath(item.note)"
　　　　　　:class="{ ‘active‘: item.note === data.currentPath }">
　　　　　　{{item.name }}
　　　　　　</a>
　　　　在toPath中对data中的currentpath进行设置
　　　　toPath () {
　　　　　　this.data.currentPath = ‘我的笔记‘
　　　　}
　　　　2. 对class添加样式用以突出

但是
　　添加的class在刷新页面的情况下会消失
所以不管怎么去做，你需要确保一个变量在刷新页面的情况下该变量一直不变
　　可以存cookie，localStorage等等
如果不想麻烦, vue已帮你处理好

解决方案:
　　vue自带有对URL定位导航栏的功能，刷新页面，会自动判断是哪个vue-link页面, 并在对应的vue-link的class添加router-link-exact-active
　　而你所需要做的就是对class为router-link-exact-active进行添加样式从而突出当前一栏