vue手机端底部导航栏_vue3 手机端 tab组件

业务逻辑：
项目多个页面需用到底部导航栏，所以抽离出来，以组件的方式引入父组件。

方法一

更新（2019年5月6日），关于底部导航栏的应用，还可以利用子组件和父组件的关系来绑定。
首先增加一个父组件文件，main.vue

<template>
  <div class="main">
    <div class="contant">
      <router-view/>
    </div>
    <nav-bar></nav-bar>
  </div>
</template>
<script>
import navBar from '@/components/common/nav.vue'

export default {
  components: {
    navBar
  }
}
</script>
<style>
 .main{
 background-color: #f2f2f2;
 }
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

父组件main.vue中所用的子组件navBar.vue，关于菜单点亮效果，主要是靠路由的跳转来绑定active-class

<template>
     <nav>
      <router-link v-for="item in nav" :to=item.router active-class="active" class="tab">
        <i :class= "item.class"></i>
        <span>{{item.desc}}</span>
      </router-link>
    </nav>
</template>


<style scoped lang="less" src="@/assets/css/nav.less"></style>
<script>
export default {
  data(){
    return{
      nav:[
        {
          router:"/home",
          class:"icon-home",
          desc:"首页"
        },
        {
          router:"/service",
          class:"icon-service",
          desc:"服务"
        },
        {
          router:"/find",
          class:"icon-find",
          desc:"发现"
        },
        {
          router:"/personal",
          class:"icon-personal",
          desc:"我的"
        },
      ]
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

路由方面（router.js）

import Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router);

var router = new Router({
  mode: 'history',
  base: '/',
  routes: [{
      path: '*',
      redirect: '/'
    },
    {
      path: '/',
      name: 'Main',
      component: () => import("@/components/common/main"),
      children: [{
          path: '/home',
          meta: {
            title: "首页"
          },
          component: () => import("@/views/home/home")
        },
        {
          path: '/service',
          meta: {
            title: "服务"
          },
          component: () => import("@/views/service/index")
        },
        {
          path: '/find',
          meta: {
            title: "发现"
          },
          component: () => import("@/views/find/index")
        },
        {
          path: '/personal',
          meta: {
            title: "个人中心"
          },
          component: () => import("@/views/personal/index")
        },

      ]
    },
  ]
});

router.beforeEach((to, from, next) => {

  //  路由发生变化修改页面title
  if (to.meta.title) {
    document.title = to.meta.title;
  }

  //  是否需要登录
  if (to.matched.some(record => record.meta.requiresAuth)) {
    if (!localStorage.Authorization) {
      next({
        path: '/login'
      })
    } else {
      next();
    }
  } else {
    next();
  }
})

export default router

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73

其余的home,service,find,personal子组件页面可自行定义

方法二
2018年7月5日
业务逻辑：
由于项目不只是主页需要导航，还有一些子页面也需要用到导航，所以不能用绑定router来实现导航的状态，故在引入组件的时候带个值（page）过去判断

navBar页面

<template>
  <ul class="nav">
    <li v-for="(item,index)  in arr" :class="item.add_link">
      <router-link :to="{name:item.url}" @click="navClick(index)">
        <i class="icon" :class="index===page?item.iconClassActive:item.iconClass"></i>

        <span :class="{active:index===page}" >{{ item.title }}</span>
      </router-link>
    </li>
  </ul>
</template>

<script>
import { mapGetters } from 'vuex';

  export default {
    name: "app-nav",
    props:['page'],
    data (){
      return {
        arr: [
          {
            title: "首页",
            url: "Financing",
            iconClass: "icon_index",
            iconClassActive:"icon_indexActive",
          },
          {
            title: "产品列表",
            url: "ProductList",
            iconClass: "icon_product",
            iconClassActive:"icon_productActive",
          }, {
            title: "个人中心",
            url: "Personal",
            iconClass: "icon_user",
            iconClassActive:"icon_userActive",
          }
        ],
      }
    }
  }
</script>

<style lang="css" src='../../style/common.css' scoped></style>
<style scoped="less">
  .nav{
    position: fixed;
    bottom: 0;
    left: 0;
    height: .76rem;
    width: 100%;
    background: #fff;
    border-top: 1px solid #dcdcdc;
    padding: .12rem 0;
  }
  .nav li{
    width: 33.33%;
    float: left;
    text-align: center;
    font-size: .24rem;
  }
  .nav li .icon{
    display: block;
    height: .44rem;
    width: 100%;
    margin: 0 auto;
  }
  .nav li .icon_index{
    background: url("../../assets/icon_index.png") no-repeat center;
    background-size: .41rem .4rem;
  }
  .nav li .icon_indexActive{
    background: url("../../assets/icon_indexActive.png") no-repeat center;
    background-size: .41rem .4rem;
  }
  .nav li .icon_product{
    background: url("../../assets/icon_product.png") no-repeat center;
    background-size: .32rem .42rem;
  }
  .nav li .icon_productActive{
    background: url("../../assets/icon_productActive.png") no-repeat center;
    background-size: .32rem .42rem;
  }
  .nav li .icon_user{
    background: url("../../assets/icon_user.png") no-repeat center;
    background-size: .44rem .44rem;
  }
  .nav li .icon_userActive{
    background: url("../../assets/icon_userActive.png") no-repeat center;
    background-size: .44rem .44rem;
  }
  .nav li span{
    display: block;
    color: #747682;
    padding-top: .1rem;
  }
  .nav li span.active{
    color: #D2A330;
  }
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101

路由router.js

import Vue from 'vue'
import Router from 'vue-router'
import NavBar from '../components/common/NavBar'// 导航

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    { path: '/fortuneCenter/nav_bar', name: 'NavBar', component: NavBar },
  ]
})
1
2
3
4
5
6
7
8
9
10
11
12

页面

 <nav-bar :idx="0"></nav-bar>
1