36-改造导航区域并跳转到商品列表页面

给导航添加到了数据中 增加了点击事件。创建商品页面，goods/goods

<template>
    <view class='home'>
        <swiper indicator-dots circular>
            <swiper-item v-for='item in swipers' :key='item.id'>
                <image :src='item.img'></image>
            </swiper-item>
        </swiper>
        <!--导航-->
        <view class='nav'>
            <view class='nav_item' v-for="(item,index) in navs" :key='index' @click="navItemClick(item.path)">
                <view :class='item.icon'></view>
                <text>{{item.title}}</text>
            </view>
        </view>
        <!--推荐商品-->
        <view class='hot_goods'>
            <view class='tit'>推荐商品</view>
            <view class='goods_list'>
                <view class='goods_item' v-for="item in goods" :key="item.id">
                    <image :src='item.img_url'></image>
                    <view class='price'>
                        <text>￥{{item.sell_price}}</text>
                        <text>￥{{item.market_price}}</text>
                    </view>
                    <view class="name">
                        {{item.title}}
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                swipers: [],
                goods: [],
                navs:[
                    {
                        icon:'iconfont icon-ziyuan',
                        title:'黑马超市',
                        path:'/pages/goods/goods'
                    },
                    {
                        icon:'iconfont icon-guanyuwomen',
                        title:'联系我们',
                        path:'/pages/contact/contact'
                    },
                    {
                        icon:'iconfont icon-tupian',
                        title:'社区图片',
                        path:'/pages/pics/pics'
                    },
                    {
                        icon:'iconfont icon-shipin',
                        title:'学习视频',
                        path:'/pages//videos/videos'
                    }
                    ]
            }
        },
        onLoad() { //监听页面加载    
            this.getSwiper()
            this.getHotGoods()
        },
        methods: {
            //获取轮播数据
            async getSwiper() {
                const res = await this.$myRequest({
                    url: '/api/getlunbo'
                })
                this.swipers = res.data.message
            },
            //获取热门商品列表数据
            async getHotGoods() {
                const res = await this.$myRequest({
                    url: '/api/getgoods?pageindex=1'
                })
                this.goods = res.data.message
            },
            //导航点击的处理
            navItemClick(url){
                //console.log('跳转')
                uni.navigateTo({
                    url
                })
            }
        }
    }
</script>
<style lang="scss">
    .home {
        swiper {
            width: 750rpx;
            height: 380rpx;
            image {
                height: 100%;
                width: 100%;
            }
        }
        .nav {
            display: flex;
            .nav_item {
                width: 25%;
                text-align: center;
                view {
                    width: 120rpx;
                    height: 120rpx;
                    background-color: $shop-color;
                    border-radius: 60rpx;
                    margin: 10px auto;
                    line-height: 120rpx;
                    color: #fff;
                    font-size: 50rpx;
                }
                .icon-tupian {
                    font-size: 45rpx;
                }
                text {
                    font-size: 30rpx;
                }
            }
        }
        .hot_goods {
            background: #eee;
            overflow: hidden;
            margin-top: 10px;
            .tit {
                height: 50px;
                line-height: 50px;
                color: $shop-color;
                text-align: center;
                letter-spacing: 20px;
                font-size: 20px;
                margin: 7rpx 0;
                background: #fff;
            }
            .goods_list {
                padding: 0 15rpx;
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                .goods_item {
                    background: #fff;
                    width: 355rpx;
                    margin: 10rpx 0;
                    padding: 15rpx;
                    box-sizing: border-box; //不会撑开盒子了
                    image {
                        width: 95%;
                        height: 200px;
                        display: block;
                        margin: 0 auto; //上面下面实现居中
                    }
                    .price {
                        color: $shop-color;
                        font-size: 36rpx;
                        margin: 5rpx 0;
                        text:nth-child(2) {
                            color: #CCC;
                            font-size: 28rpx;
                            margin-left: 17rpx;
                            text-decoration: line-through;
                        }
                    }
                    .name {
                        font-size: 22rpx;
                        line-height: 40rpx;
                    }
                }
            }
        }
    }
</style>

goods页面

<template>
    <view>
        商品列表
    </view>
</template>
<script>
    export default {
        data() {
            return {
            };
        }
    }
</script>
<style lang="scss">
</style>