vue 项目 之 移动端周边商城 【1底部导航】

源码

ruoter.js

import Vue from 'vue'
import Router from 'vue-router'
// import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/home',
      component: (r)=>require(['../pages/home.vue'],r),  // 路由按需引入
      children: [
        {
          path: '',
          component: (r)=>require(['../pages/index.vue'],r),  // 路由按需引入
        },
        {
          path: 'wallet',
          component: (r)=>require(['../pages/wallet.vue'],r),  // 路由按需引入
        },
        {
          path: 'myself',
          component: (r)=>require(['../pages/myself.vue'],r),  // 路由按需引入
        }
      ]
    },
    {
      path: '*',
      redirect: '/home'
    }
  ]
})

布局

home.vue

<template>
  <div class="homebox">
    <router-view class="routerView"></router-view>
    <van-tabbar v-model="active" style="height:10vh">
      <van-tabbar-item @click="$router.push('/home')">
        <span>周边商城</span>
        <template #icon="props">
          <img :src="props.active ? icon.homeFill : icon.home" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item @click="$router.push('/home/wallet')">
        <span>我的钱包</span>
        <template #icon="props">
          <img :src="props.active? icon.walletFill : icon.wallet" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item @click="$router.push('/home/myself')">
        <span>个人中心</span>
        <template #icon="props">
          <img :src="props.active ? icon.myFill : icon.my" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
import home from "@/assets/[email protected]";
import homeFill from "@/assets/[email protected]";
import wallet from "@/assets/[email protected]";
import walletFill from "@/assets/[email protected]";
import my from "@/assets/[email protected]";
import myFill from "@/assets/[email protected]";

import { Tabbar, TabbarItem } from "vant";
export default {
  components: {
    vanTabbar: Tabbar,
    vanTabbarItem: TabbarItem
  },
  data() {
    return {
      props:{
      active: 0,
      },
      icon: {
        home: home,
        homeFill: homeFill,
        wallet: wallet,
        walletFill: walletFill,
        my: my,
        myFill: myFill
      }
    };
  },
  created() {
    // try {
    //   var url = window.location.href;
    //   if (url.search("openid") != 0) {
    //     var openid = url.split("openid=")[1].split("&")[0];
    //     localStorage.setItem("openid", openid);
    //   }
    // } catch (err) {}
    // console.log(this.$route.fullPath);
    // var router = this.$route.fullPath;
    // if (router == "/home") {
    //   this.active = 0;
    // } else if (router == "/home/wallet") {
    //   this.active = 1;
    // } else if (router == "/home/my") {
    //   this.active = 2;
    // }
  },
  mounted() {

  }
};
</script>
<style lang="scss" scoped>
.homebox {
  /deep/ .van-tabbar-item--active .van-tabbar-item__text {
    span {
      font-style: 20px;
      color: #ef5110;
      font-weight: 600;
    }
  }
  .routerView {
    height: 90vh;
    overflow-y: scroll;
    overflow-x: hidden;
    // padding-bottom: 10vh;
  }
}
.huhu {
  font-style: 20px;
  color: #ef5110;
  font-weight: 600;
}
</style>

index.vue

<template>
  <div class="indexbox">
      周边商城首页
  </div>
</template>

<script>
export default {
  data () {
    return {

    }
  }
}
</script>

<style lang='scss' scoped>

</style>

myself.vue

<template>
  <div class="myselfbox">
      个人中心
  </div>
</template>

<script>
export default {
  data () {
    return {

    }
  }
}
</script>

<style lang='scss' scoped>

</style>

wallet.vue

<template>
  <div class="walletbox">
      我的钱包
  </div>
</template>

<script>
export default {
  data () {
    return {

    }
  }
}
</script>

<style lang='scss' scoped>

</style>

效果

后续会同步到 git 中