Vue如何實現左右滑動內容區控制導航tab同時切換高亮，實現的效果是：點擊導航按鈕時內容區發生改變，左右滑動內容區時導航按鈕跟隨切換高亮，停留在某個內容區時刷新頁面后仍然停留在當前內容區。
這里涉及到幾個點：
1.左右滑動，那就需要用到swiper，當然你可以自己寫一個類似的功能，雖然不難但是項目開發中可能會比你引入插件要耗時很多；
2.Vue開發鼓勵組件化，所以在這我是分為nav和swiper兩個組件，那么就要用到事件發射與接收，我在前面的博文有關於事件發射與接收的心得，
具體點擊查看；
3.利用vue路由和動態組件實現模板加載，切換和刷新頁面停留在當前內容區；
實現的效果如下圖所示：
開始具體的代碼實現：
一.在main.js設置路由相關數據，如下圖所示：
編寫app.vue的代碼，如下圖所示：
二.我們先實現點擊導航按鈕時內容區發生改變。
1.導航組件的靜態模板很簡單，如下圖所示：
2.swiper組件的靜態模板，首先要引入swiper，下載swiper的js和css文件放入static文件夾，在swiper組件中引入，如下圖所示：
3.同時在eslintrc.js文件中加入紅框中代碼，如下圖所示：
4.此時已引入swiper插件，我們需要讓鏈接路徑與slide的內容區的模板文件保持同步，這里通過路由獲取鏈接地址控制swiper的初始slide索引initialSlide即可實現，如下圖第61行所示。
5.一般情況下內容區我們會做成獨立的模板進行動態導入，傳統js可以運用iframe框架引入模板文件，angular可以運用ng-include指令引入模板文件，那么vue用什么呢，vue用動態組件的方式引入，官網有詳細解說我就不解釋了，
具體查看。swiper組件靜態模板代碼如下圖所示：
此時swiper組件已經完成，可以自由滑動，其中one、two、three、four、five是動態載入的模板文件。
6.前期工作已經完成，由於我們是在兩個組件間進行交互，所以點擊導航按鈕時需要將當前導航按鈕的index傳給swiper組件，然后利用swiper插件的slideTo方法跳轉到相應的內容區，所以在
nav組件的tabClick方法中加入發射事件，如下圖所示：
7.然后在
swiper組件添加接收方法，如下圖所示：
此時已經實現點擊導航按鈕時內容區發生改變的效果。
三.實現左右滑動內容區時導航按鈕跟隨切換高亮。
1.左右滑動內容區時利用swiper插件的on方法監控slideChange屬性,當滑動slide后將當前activeIndex傳給nav組件，所以在
swiper
組件加入發射事件，如下圖紅框所示：
2.然后在
nav組件添加接收方法，如下圖紅框所示：
3.此時已經實現左右滑動內容區時導航按鈕跟隨切換高亮。但是我們刷新頁面會發現鏈接路徑與導航按鈕的高亮並不一致，是因為我們導航按鈕初始索引nowIndex為0，所以我們需要通過路由獲取鏈接地址賦值給nowIndex實現刷新頁面后鏈接路徑與導航按鈕同步，如下圖紅框所示：