在寫本文之前要問自己幾個問題，來說明為什么要這么做：
為什么在html中使用vue.js?
vue.js已經趨於成熟，個人感覺比jquery要好用的多，但是在node環境下使用vue.js不用使用SSR后端渲染的情況下SEO並不友好，所以就想着在html直接引用vue.js當做jquery使用。
為什么不使用SSR后端渲染？
因為本人搞后台開發使用的是JAVA，所以要想SSR必須使用nodejs作為服務端，所以我並沒有太多時間學習nodejs
所以最后決定在后台使用thymeleaf模板引擎中使用vue.js，我做的是一個博客系統，我從入行開始就想有一個屬於自己的博客，但是當時時間和技術都是非常有限的，所以一直沒有把這件事提上日程，今年是我第二年工作，感覺學習的技術足可以做一個簡單的博客了，本人博客園也會圍繞我自己搭建的個人博客遇到的問題展開技術的分享，下一篇介紹我的來歷還有我的經歷，如果有人看見的話希望我們可以交流技術可以互相學習，好了廢話不多說，我要解決的問題是，博客的導航欄的復用，就是頭部導航欄點中的話就高亮，就要實現這么一個簡單的問題。
使用的技術：
vue.js模板、Element 導航欄
本人沒有寫過太多博客，所以博客的排版可能不太好，請您原諒，這個坑不適用於nodejs下的vue開發，因為那個環境下是單頁應用，我只是當成jq來用的，所以可能不太規范，請您諒解。
要解決的問題：
復用導航欄，而且有選中高亮。
實現的效果：
切換tab
最終效果就是這樣，切換后自動選中，不是在每個頁面都寫一遍導航欄，那樣太難維護了！
代碼：
// 定義一個名為 his-header 的新組件
Vue.component('his-header', {
data: function () {
return {
index: 0
}
},
props: ['indexs'],
template: '<el-menu :default-active="index" class="el-menu-demo" mode="horizontal"><li class="el-menu-item index" style="margin-left: 20%;"><h2><a href="/">起碼網</a></h2></li><el-menu-item index="1"><a href="/">首頁</a></el-menu-item><el-menu-item index="2"><a href="/resource">建站教程</a></el-menu-item><el-menu-item index="3"><a href="/resource">應用中心</a></el-menu-item><el-menu-item index="4"><a href="https://www.ele.me" target="_blank">資源分享</a></el-menu-item><el-menu-item index="5"><a href="https://www.ele.me" target="_blank">隨筆雜談</a></el-menu-item><el-menu-item index="6"><a href="/about">關於我</a></el-menu-item></el-menu>',
mounted: function () {//創建完模板以后再賦值讓element 選中菜單
this.index = this.indexs;
}
})
<his-header v-bind:indexs="1"></his-header>
<his-header v-bind:indexs="2"></his-header>
在每個頁面只要使用這樣的標簽就可以實現了！