Vue展示商品列表页数据-1
来自CloudWiki
搜索和列表的路由
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