不想分析可以直接看解决方案
问题描述:
通过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进行添加样式从而突出当前一栏