路由跳转到页面指定位置（瞄点），并且导航栏进行相应的高亮显示

制作公司官网，免不了通过点击不同的导航栏到跳转到不同页面的指定位置。同时也会遇到页面时跳转了，但是导航栏没进行相应的高亮显示

总结: document.getElementById().scrollIntoView()和this.$route.name

第一步解决路由跳转到页面指定位置

点击上面图片中的底部导航栏，页面会跳到相应页面的指定位置

页面跳转到指定位置可以通过方法document.getElementById('idName').scrollIntoView()来跳转到页面指定元素的位置。
通过这个方式就可以，在页面mounted()挂载这个生命周期中调用方法，来进行页面跳转。mounted()生命周期中已经可以获取到页面元素的id了。created()中没有真实的dom。
首先把指定位置的element都绑定上id，然后通过点击导航栏，把指定的元素id带到相应的页面

//value: 跳转路径名， toId跳转之后定位到element瞄点， activeIndex: 顶部导航栏高亮
    btnRouterPush(value, toId, activeIndex) {
      this.$router.push({
        path: value,
        query: {
          t: Date.now()
        }
      })
      localStorage.setItem('idName', toId || value)
      this.$store.commit('changeActiveIndex', activeIndex || value)
    }

mounted() {
    this.toScroll()
  },
  methods: {
    toScroll() {
      let idName = localStorage.getItem('idName')
      let toElement = document.getElementById(idName)
	  //判断有没有瞄点id有就是底部导航栏跳转，会定位到指定位置，没有id就是顶部的导航栏跳转不会到页面指定位置
      if(!!toElement) {
        toElement.scrollIntoView()
        //跳转到对应位置之后释放本次存储中的idName，以免顶部导航栏跳转出现问题
        localStorage.setItem('idName', '')
      }
    }
  }

第二步显示顶部导航栏对应页面的高亮

1. 通过全局状态管理vuex来进行高亮显示

顶部的导航栏点击高亮有element组件进行了处理（但是存在问题，等下再讲问题），
底部的目录导航栏点击路由跳转之后顶部的导航栏要进行相应的高亮显示，可以通过vuex存储点击时的高亮显示

 //value: 跳转路径名， toId跳转之后定位到element瞄点， activeIndex: 顶部导航栏高亮
    btnRouterPush(value, toId, activeIndex) {
      this.$router.push({
        path: value,
        query: {
          t: Date.now()
        }
      })
      localStorage.setItem('idName', toId || value)
      //在vuex中存储需要高亮显示的导航
      this.$store.commit('changeActiveIndex', activeIndex || value)
    }

在顶部导航栏点击事件中也要改变store中的activeIndex

//页面中,在computed中可以实时的变化高亮
computed: {
	actives() {
		return this.$store.state.activeIndex
    }
}

2. 通过当前路径来进行导航栏高亮显示

element组件存在的问题就是手动刷新页面后，element组件记录当前页面但是导航栏高亮不会记录，这时导航栏高亮就会出现问题

获取当前路径中的参数，来显示导航栏高亮，可以设置高亮对应的index就是路由名，这样可以直接使用。不用再从路由中进行参数的设置。

computed: {
    activeIndex() {
      return this.$route.name
    }
  },

可以直接使用路径名来设置高亮，这样方便简洁

computed: {
    activeIndex() {
      return this.$store.state.activeIndex || this.$route.meta.activeIndex || this.$route.name
    }
  },

也可以结合vuex一起使用，当存在特殊路径（同一路由不同高亮显示时）可以在路由中定义参数，来进行高亮显示

标签：activeIndex,高亮,跳转,value,瞄点,导航,页面
来源： https://www.cnblogs.com/wang--chao/p/15641192.html