脚手架创建的uniapp h5中分包下的导航栏

在uniapp分包项目中使用自定义导航栏（我不会在uniapp分包中使用自带的tabbar，有会的大佬也可以指点一二）。刚开始，测试是各种bug,导航是没问题，但是下面的激活图标总是对不上，绞尽脑汁，可算是解决了。

效果图：（中间的内容就不展示了）

思路：不管是第一次进入页面还是通过返回进入页面（执行的事件就是onShow），都要拿到当前页面的URL（通过window.location.herf 获取）， 然后利用vuex，将当前对应的current赋值给导航栏的下标，就实现了当前页面以及他对应的导航栏图标被激活了。

具体实施：

1.创建组将Nav.vue ,放置导航：

<template>
  <nav class="nav">
    <view class="nav1"  @click="handlebar(item)" v-for="item in tabbararr" :key="item.id">
        <img
        v-if="ab_current==item.id"
          class="navimg"
          :class="item.id==0? 'active_navimg':''"
          :src=" item.src2 "
        />
        <img
        v-else
          class="navimg"
          :class="item.id==0? 'active_navimg':''"
          :src=" item.src1"
        />
        <view >{{ item.text }}</view>
    </view>
  </nav>
</template>

<script>
import { mapState } from "vuex";
export default {
	data() {
		return {
			id: 0,
			tabbararr: [
				{
					src1: require("../static/tarbar/3963.png"),
					src2: require("../static/tarbar/3964.png"),
					url: "/area/jiaxing/pages/index/index",
					text: "首页",
					id: 0,
				},
				{
					src1: require("../static/tarbar/34(1).png"),
					src2: require("../static/tarbar/34.png"),
					url: "/area/jiaxing/pages/map/map",
					text: "红色地图",
					id: 1,
				},
				{
					src1: require("../static/tarbar/35(1).png"),
					src2: require("../static/tarbar/35.png"),
					url: "/area/jiaxing/pages/study-tour/guard",
					text: "守护人",
					id: 2,
				},
				{
					src1: require("../static/tarbar/37(1).png"),
					src2: require("../static/tarbar/37.png"),
					url: "/area/jiaxing/pages/study-tour/allOrder?id=3",
					text: "预约",
					id: 3,
				},
				{
					src1: require("../static/tarbar/38(1).png"),
					src2: require("../static/tarbar/38.png"),
					url: "/area/jiaxing/pages/main/main",
					text: "我的",
					id: 4,
				},
			],
		};
	},

	computed: {
		...mapState(["ab_current"]),
	},
	watch: {
		current() {
			console.log("导航栏-当前值变了");
		},
	},
	methods: {
		handlebar(e) {
			console.log(e);
			this.current = e.id;
			uni.navigateTo({
				url: e.url,
			});
		},
	},
};
</script>

<style lang='scss' scoped>
.nav {
	background-color: #fff;
	width: 100vw;
	// height: 100rpx;
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 23;
	display: flex;
	justify-content: space-between;
	padding: 0 40rpx;
	.nav1 {
		@include myflex_col;
		margin-top: 1vh;
		margin-bottom: 4vh;
		.navimg {
			width: 7vw;
			height: 7vw;
		}
		.active_navimg {
			width: 8vw;
			height: 8vw;
		}
	}
}
</style>

2.创建Layout.vue 组件，引入Nav.vue组件（引入的时候必须大写）。并且写入插槽，用来放正式内容：

<template>
  <view>
    <view class="laycontent">
      <slot></slot>
    </view>
    <Nav ></Nav>
  </view>
</template>

<script>
// 必须大写才生效
import Nav from "./Nav.vue";
export default {
	components: {
		Nav,
	},
};
</script>

<style lang='scss' scoped>
.laycontent {
	position: relative;
}
</style>

3.开始写页面，引入Layout.vue 文件:

<template>
    <Layout>
        <view>
           //具体内容
        </view>
    </Layout>
</template>
<script>
    import http from '../../request/http.js'
    import Layout from "../Layout.vue";
    import {mapState,mapMutations} from 'vuex'
    export default {
      components: {
        Layout,
      },
      
      
    // 1. 不管是第一次进入页面还是通过返回进入页面（执行的事件就是onShow）,所以才将赋值的函数放置此处  
   onShow(){
       // 2. 当前页面的URL ,利用vuex赋值
    if(window.location.href.split('#')[1].indexOf('main')>-1){
      this.change_ab_current(4)
    }
  },
  methods: {
    ...mapMutations(['change_ab_current']),
    
   }

其实明白过来了就特别简单，当时是怎么都没想到。