vue3前端开发-小兔鲜项目-一级页面产品列表渲染！

这一次做两件事。第一个是给导航栏增加一个动态标记的属性。第二件事是渲染一下一级页面内产品列表。

---

第一件事，很简单，路由器插件，自带了这种属性。

如图所示，有一个属性，是官方提供的，我们只需要调用这个属性就行了。

把自己写好的样式，赋值一下就行了。非常简单。

---

第二件事，提前准备好模板的代码。这里面会再次复用之前我们定义的模块（ProductItem.vue）；未来其他页面还会 再次用到他的，因此，单独拎出来，做成一个独立的模块，极大的提升了开发效率。

<div class="sub-list">
              <h3>全部分类</h3>
              <ul>
                <li v-for="i in categoryData.children" :key="i.id">
                  <RouterLink to="/">
                    <img :src="i.picture" />
                    <p>{{ i.name }}</p>
                  </RouterLink>
                </li>
              </ul>
            </div>
            <div class="ref-goods" v-for="item in categoryData.children" :key="item.id">
              <div class="head">
                <h3>- {{ item.name }}-</h3>
              </div>
              <div class="body">
                <ProductItem v-for="good in item.goods" :goods="good" :key="good.id" />
              </div>
            </div>

这个就是本次一级页面渲染列表使用的代码。

---

 如图所示，从远程业务接口调用的数据渲染成功了。