大致思路:写好布局之后,就开始我们的js渲染和vuex操作,先写路由跳转,让页面能够简单的跳转,主要就是路由嵌套路由的写法。然后就是数据的绑定和循环,先设置一个空的数组,给他起一个名字,把后台数据赋值到这个空数组内,在页面中进行循环渲染。基本就是拿数据渲染视图,只是一层又一层的渲染,父级路由嵌套子级路由。
效果图如下:
先写好咱们的简单的布局:
<template>
<div class="recipe">
<!-- v-model="activeName" -->
<!-- 菜谱分类 start -->
<el-tabs type="border-card>
<el-tab-pane>
<div class="recipe-link">
<router-link >
菜单一
</router-link>
</div>
</el-tab-pane>
<el-tab-pane>
<div class="recipe-link">
<router-link >
菜单二
</router-link>
</div>
</el-tab-pane>
<el-tab-pane>
<div class="recipe-link">
<router-link >
菜单三
</router-link>
</div>
</el-tab-pane>
</el-tabs>
<!-- 菜谱分类 end -->
<h2>家常好味道,给你家一般的温暖</h2>
<!-- 容器 -->
<!-- 左侧列表 -->
<!-- 右侧显示 -->
<!-- 容器 -->
<el-container>
<el-aside width="220px" class="recipe-aside">