對於HTML+ajax開發前端，很多時候頁面會有一部分固定內容，例如底部一個切換，相當於tab，很多頁面都會用到，一個一個頁面寫肯定是不明智的。

曾經使用過ifream來實現，呵呵。。。

用一個js檔案，每個頁面拉一個，這樣也可以，每次修改只要修改js檔案，所有頁面都修改了。

迴歸正題：

直接上程式碼：js檔案程式碼，url就是跳轉地址，ison是是否選中，count是tab上有時候需要提示一個數字還是什麼，自行理解。

Vue.component('webbottom', {
    props: ['post'],
    template: " <a  v-on:click=\"$emit('goto-url',post.url,post.id)\" :class=\"[post.ison]\" >{{post.title}}<span v-if=\"post.count>0\">{{post.count}}</span></a>"
})
var Index = new Vue({
    el: '#app_bottom',
    data: {
        posts: [
      { id: 7, title: '我的首頁', url: 'HtmlPage.html',ison:'' },
      { id: 8, title: '個人中心', url: 'vue_compnent.html', ison:'' },
      { id: 9, title: '訊息中心', url: 'content', count: 1, ison:'' }
        ]
    },
    methods: {
        GotoUrl: function (argument,id) {
            alert(argument);
            //許可權
            location.href = argument;
        }
    }
});
//初始化資料
$(document).ready(function () {
    Index.posts[2].count = 5;
    Index.posts[id].ison = "on";
})
 

前端頁面：html，在每個需要的頁面都填上這段程式碼，樣式有樣式表就不用添加了，我自己寫的樣式用來測試選中狀態，醜死了。注意裡面有個變數id，這個就是一個值，告訴js那個標籤處於選中狀態。和js中這個id是對應的

記得要引用js
 <script src="jquery132min.js"></script>
 <script src="vue.js" type="text/javascript"></script>

寫一個可複用檔案（可當做HTML頁的模板內容）放在body裡
    <style type="text/css">
        .bottom span {
            padding: 10px;
            margin: 10px;
            background-color: red;
        }

        .bottom a {
            padding: 10px;
            margin: 10px;
            background-color: yellow;
            cursor: alias;
        }

            .bottom a:hover {
                padding: 10px;
                margin: 10px;
                background-color: blue;
            }

            .bottom a.on {
                background-color: forestgreen;
            }
    </style>
    <div id="app_bottom" class="bottom">
        <a class="on">測試<span>效果</span></a>

        <webbottom v-for="post in posts"
                   v-bind:key="post.id" v-bind:post="post" v-on:goto-url="GotoUrl"></webbottom>
    </div>
    <script> var id =0;//獲得引數 </script>
    <script src="JavaScript.js" type="text/javascript"></script>
 

程式碼簡簡單單，喜歡就點個贊。