Vue展示商品列表页数据-1

搜索和列表的路由

head/head.vue

搜索和列表的路由表面上不同：

搜索的路由:

<div class="head_search_hot">
         <span>热搜榜：</span>
          <router-link v-for="item in hotSearch" :to="'/app/home/search/'+item.keywords" :key="item.keywords">
            {{item.keywords}}
          </router-link>
        </div>

列表的路由：

<div v-for="list in item.sub_cat">
                                        <dl>
                                          <dt>
                                            <router-link :to="'/app/home/list/'+list.id">{{list.name}}</router-link>
                                          </dt>

                                          <dd>
                                            <router-link  v-for="childrenList in list.sub_cat" :key="childrenList.id" :to="'/app/home/list/'+childrenList.id">{{childrenList.name}}</router-link>
                                          </dd>
                                        </dl>
                                        <div class="clear"></div>
                                      </div>

但是实际上都是指向同一组件list:

router -> index.js:

children: [
          {
            path: 'list/:id',
            name: 'list',
            component: list,
            meta: {
              title: '列表',
              need_log: false
            }
          },
          {
            path: 'search/:keyword',
            name: 'search',
            component: list,
            meta: {
              title: '搜索',
              need_log: false
            }
          },

虽然都是加载的同一组件，但是参数是不一样的，请见下面的getAllData

它会根据参数中有无id,决定左侧导航栏返回的是何页面。

list-> list.vue

created () {
            this.getAllData ();
        },

methods: {
            getAllData () {
                console.log(this.$route.params)
                if(this.$route.params.id){
                    this.top_category = this.$route.params.id;
                    this.getMenu(this.top_category); // 获取左侧菜单列表
                }else{
                    this.getMenu(null); // 获取左侧菜单列表
                    this.pageType = 'search'
                    this.searchWord = this.$route.params.keyword;
                }

                this.getCurLoc(); // 获取当前位置
                this.getListData(); //获取产品列表
                this.getPriceRange(); // 获取价格区间
            },