在请求数据回来时，将字符串序列化成对象，页面渲染思路

 var vm = new Vue({
        el: "#searchApp",
        data: {
            ly,
            search:{},
            goodsList :[],
            total :0,
            totalPage :0 
        },
        created(){
             
            if(!location.search){
                return;
            }
            
            const search = ly.parse(location.search.substring(1));
            this.search = search;
            this.loadData();
        },
       methods:{
            loadData(){
                
                 // 发起异步请求
                ly.http.post("/search/page",this.search)
                    .then(resp => {
                    console.log(resp.data);
                    this.total = resp.data.total;
                    this.totalPage = resp.data.totalPage;
                    //将skus转成json对象
                    resp.data.items.forEach(goods=>{
                        goods.skus = JSON.parse(goods.skus);
                        goods.selectedSku =  goods.skus[0];
                    })
                    this.goodsList = resp.data.items;
                })
            }

http://www.jd.com/search.html?key=%E6%89%8B%E6%9C%BA

获取查询参数序列化Json

 if(!location.search){return;  }
  console.log("222");
 const search = ly.parse(location.search.substring(1));
  his.search = search;

给每一个goods对象都填将一个selectedSku属性，默认存储第一个sku

 <div class="goods-list">
                <ul class="yui3-g">
                    <li class="yui3-u-1-5" v-for="goods in goodsList" :key="goods.id">
                        <div class="list-wrap">
                            <div class="p-img">
                                <a href="item.html" target="_blank"><img :src="goods.selectedSku.image" height="200"/></a>
                                <ul class="skus" >
                                    <li :class="{selected : goods.selectedSku.id==sku.id }" @mouseenter="goods.selectedSku=sku" v-for="sku in goods.skus " :key="sku.id"><img :src="sku.image"></li>
                                </ul>
                            </div>
                            <div class="clearfix"></div>
                            <div class="price">
                                <strong>
                                    <em>¥</em>
                                    <i v-text = "ly.formatPrice(goods.selectedSku.price)"></i>
                                </strong>
                            </div>
                            <div class="attr">
                                <em v-text="goods.selectedSku.title.substring(0,21)+'...'"></em>
                            </div>
                            <div class="cu">
                                <em><span>促</span>{{goods.subTitle.substring(0,15)+'...'}}</em>
                            </div>
                            <div class="commit">
                                <i class="command">已有2000人评价</i>
                            </div>
                            <div class="operate">
                                <a href="success-cart.html" target="_blank" class="sui-btn btn-bordered btn-danger">加入购物车</a>
                                <a href="javascript:void(0);" class="sui-btn btn-bordered">对比</a>
                                <a href="javascript:void(0);" class="sui-btn btn-bordered">关注</a>
                            </div>
                        </div>
                    </li>

分页条实现

<div class="sui-pagination pagination-large">
            <ul style="width: 550px">
                <li :class="{prev:true,disabled:search.page === 1}">
                    <a href="#">«上一页</a>
                </li>
                <li :class="{active: index(i) === search.page}" v-for="i in Math.min(5,totalPage)" :key="i">
                    <a href="#">{{index(i)}}</a>
                </li>
                <li class="dotted" v-show="totalPage > 5"><span>...</span></li>
                <li :class="{next:true,disabled:search.page === totalPage}">
                    <a href="#">下一页»</a>
                </li>
            </ul>
            <div>
                <span>共{{totalPage}}页&nbsp;</span>
                <span>
                    到第
                    <input type="text" class="page-num" :value="search.page">
                    页 <button class="page-confirm" onclick="alert(1)">确定</button>
                </span>
                </div>
            </div>

js 思路

思路分析：

• 最多有5个按钮，因此我们可以用v-for循环从1到5即可，假如遍历得到的值为i
• 但是分页条不一定是从1开始：
  • 如果当前页值小于等于3的时候，分页条位置从1开始到5结束，页码就是遍历得到的i的值
  • 但是如果大于3，则不应该是i，而是要比i大了（page-3），所以就是page-3 + i

index(i) {
    if (this.search.page <= 3 || this.totalPage <= 5) {
        // 当前页小于3，则页码就是从 i 开始
        return i;
    } else if(this.search.page <= this.totalPage - 2) {
        // 大于3，则从page-2开始，然后逐个加1
        return this.search.page - 3 + i;
    } else{
        return this.totalPage - 5 + i;
    }
}

            <div class="fr">
           <div class="sui-pagination pagination-large">
            <ul style="width: 550px">
                <li :class="{prev:true,disabled:search.page === 1}">
                    <a href="#" @click="prevPage">«上一页</a>
                </li>
                <li :class="{active: index(i) === search.page}" v-for="i in Math.min(5,totalPage)" :key="i">
                    <a href="#">{{index(i)}}</a>
                </li>
                <li class="dotted" v-show="totalPage > 5"><span>...</span></li>
                <li :class="{next:true,disabled:search.page === totalPage}">
                    <a href="#" @click="nextPage">下一页»</a>
                </li>
            </ul>
            <div>
                <span>共{{totalPage}}页&nbsp;</span>
                <span>
                    到第
                    <input type="text" class="page-num" :value="search.page">
                    页 <button class="page-confirm" onclick="alert(1)">确定</button>
                </span>
                </div>
            </div>
        </div>
       

<script type="text/javascript">
    var vm = new Vue({
        el: "#searchApp",
        data: {
            ly,
            search:{},
            goodsList :[],
            total :0,
            totalPage :0 
        },
        created(){
             console.log("111");
            if(!location.search){
                return;
            }
             
            const search = ly.parse(location.search.substring(1));
            search.page  =search.page ? parseInt(search.page) :1;
            this.search = search;
            this.loadData();
        },
       methods:{
            loadData(){
                console.log("333");
                 // 发起异步请求
                ly.http.post("/search/page",this.search)
                    .then(resp => {
                    console.log(resp.data);
                    this.total = resp.data.total;
                    this.totalPage = resp.data.totalPage;
                    //将skus转成json对象
                    resp.data.items.forEach(goods=>{
                        goods.skus = JSON.parse(goods.skus);
                        goods.selectedSku =  goods.skus[0];
                    })
                    this.goodsList = resp.data.items;
                })
            },
            index(i) {
                if (this.search.page <= 3 || this.totalPage <= 5) {
                    // 当前页小于3，则页码就是从 i 开始
                    return i;
                } else if(this.search.page <= this.totalPage - 2) {
                    // 大于3，则从page-2开始，然后逐个加1
                    return this.search.page - 3 + i;
                } else{
                    return this.totalPage - 5 + i;
                }
            },
             prevPage(){
                if(this.search.page > 1){
                    this.search.page--
                }
             },
            nextPage(){
                if(this.search.page < this.totalPage){
                    this.search.page++
                }
            }

        },
        watch:{
            search:{
                deep:true,
                    handler(val,old){
                    if(!old || !old.key){
                        // 如果旧的search值为空，或者search中的key为空，证明是第一次
                        return;
                    }
                    // 把search对象变成请求参数，拼接在url路径
                    window.location.href = "http://www.leyou.com/search.html?" + ly.stringify(val);
                }
            }
        },

        components:{
            lyTop: () => import("./js/pages/top.js")
        }
    });
</script>