vue 导航栏刷新页面定位:

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

问题描述:
  通过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进行添加样式从而突出当前一栏

posted @ 2017-11-07 18:09  Iven_Han  阅读(4701)  评论(0编辑  收藏  举报