路由跳轉到頁面指定位置（瞄點），並且導航欄進行相應的高亮顯示

制作公司官網，免不了通過點擊不同的導航欄到跳轉到不同頁面的指定位置。同時也會遇到頁面時跳轉了，但是導航欄沒進行相應的高亮顯示

總結: 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一起使用，當存在特殊路徑（同一路由不同高亮顯示時）可以在路由中定義參數，來進行高亮顯示