项目代码分析

1.数据加载，两种方式
方式一：

import {cityGuess, hotcity, groupcity} from '../../service/getData'
mounted(){
        // 获取当前城市
        //返回promise对象之后的处理
        cityGuess().then(res => {
            this.guessCity = res.name;
            this.guessCityid = res.id;
        })

        //获取热门城市
        hotcity().then(res => {
            this.hotcity = res;
        })

        //获取所有城市
        groupcity().then(res => {
            this.groupcity = res;
        })
    },

方式二：

created(){
     this.getCaptchaCode()
},
async getCaptchaCode(){
     let res = await getcaptchas();
     this.captchaCodeImg = res.code;
},

2.计算属性（外加循环嵌套）

//计算属性
 computed:{
        //将获取的数据按照A-Z字母开头排序
        sortgroupcity(){
            let sortobj = {};
            for (let i = 65; i <= 90; i++) {
                if (this.groupcity[String.fromCharCode(i)]) {
                    sortobj[String.fromCharCode(i)] = this.groupcity[String.fromCharCode(i)];
                }
            }
            return sortobj
        }
    },

//循环嵌套
<li v-for="(value, key, index) in sortgroupcity" :key="key"  class="letter_classify_li">
                    <h4 class="city_title">{{key}}
                        <span v-if="index == 0">（按字母排序）</span>
                    </h4>
                    <ul class="groupcity_name_container citylistul clear">
                        <router-link  tag="li" v-for="item in value" :to="'/city/' + item.id" :key="item.id" class="ellipsis">
                            {{item.name}}

                        </router-link>
                    </ul>
                </li>

3.从this.$route.params里获取值，进行页面数据加载

  mounted(){
            this.cityid = this.$route.params.cityid;
            //获取当前城市名字
            currentcity(this.cityid).then(res => {
                this.cityname = res.name;
            })
            this.initData();
        },

4.从this.$route.query中获取值

 created(){
            //获取上个页面传递过来的geohash值
            this.geohash = this.$route.query.geohash;
            //获取上个页面传递过来的shopid值
            this.shopId = this.$route.query.shopId;
            this.INIT_BUYCART();
            this.SAVE_SHOPID(this.shopId);
            //获取当前商铺购物车信息
            this.shopCart = this.cartList[this.shopId];
        },
        mounted(){
            if (this.geohash) {
                this.initData();
                this.SAVE_GEOHASH(this.geohash);
            }
            if (!(this.userInfo && this.userInfo.user_id)) {
                this.showAlert = true;
                this.alertText = '您还没有登录';
            }
        },