普通頁面使用vue.js心得

在寫本文以前要問本身幾個問題，來講明爲何要這麼作：

 

爲何在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>

在每一個頁面只要使用這樣的標籤就能夠實現了！