一個移動端的前端肯定是需要頭部導(dǎo)航欄的，頭部導(dǎo)航欄需要通過路由知道是否要顯示返回按鈕，并且根據(jù)底部導(dǎo)航欄改變title，還需要判斷是否需要隱藏底部導(dǎo)航欄。

底部導(dǎo)航欄實現(xiàn)

演示

演示

實現(xiàn)

實現(xiàn)頭部導(dǎo)航欄

我們需要在watch里觀測是否在二級頁面，那么只要知道哪些是一級頁面即可。通過topPage配置一級頁面的name，每次路由獲取to.name就可以進行判斷了。只要是二級頁面就顯示左側(cè)返回按鈕并且回調(diào)告訴App.vue需要隱藏底部的TabBar。

<template>
    <nav id="navigation" class="row">
        <div class="col-xs-2"  @click="navigationBack">
            <i class="iconfont icon-fanhui" v-if="isCanBack"></i>
        </div>
        <div class="col-xs-8">
            <span>{{title}}</span>
        </div>
    </nav>
</template>

<script>
    export default {
        name: "navigation",
        props: {
            title: String
        },
        data: function () {
            return {
                isCanBack: false,
            }
        },
        watch: {
            $route(to, from) {
                let topPage = ['HomeIndex', 'StoreList', 'Me'];
                let toName = to.name;
                let isNeedShow = true;
                for (let i=0;i<topPage.length;i++) {
                    if (toName === topPage[i]) {
                        isNeedShow = false;
                        break;
                    }
                }
                this.isCanBack = isNeedShow;
                this.$emit('need-hidden-tab-bar', isNeedShow);
            }
        },
        methods: {
            navigationBack: function () {
                this.$router.go(-1);
            }
        }
    }
</script>

<style scoped>
    nav {
        background-color: white;
        width: 100%;
        height: 44px;
        border: solid rgb(210, 210, 210);
        border-width: 0 0 1px 0;
        position: fixed;
        margin: auto;
        top: 0;
    }

    div {
        text-align: center;
        line-height: 44px;
    }

    span {
        font-size: 18px;
        font-weight: bold;
    }

</style>

# App.vue
<TabBar @select-item="onClickTabBarItem" v-if="isTop"/>

data: function () {
        return {
            navTitle: '首頁',
            isTop: true
        }
    }

methods: {
        onClickTabBarItem: function (tag) {
            if (tag === 0) {
                this.$router.replace({name: "Home"});
                this.navTitle = '首頁';
            } else if (tag === 1) {
                this.$router.replace({name: "StoreList"});
                this.navTitle = '商戶';
            } else if (tag === 2) {
                this.$router.replace({name: "Me"});
                this.navTitle = '我';
            }
        },
        isNeedHiddenTabBar: function (isNeed) {
            this.isTop = !isNeed;
        }
    }

移動到二級頁面

首先是在router.js里注冊children

import HomeIndex from 'components/home/Index'
import HomeMovie from 'components/home/Movie'
name: 'Home',
        path: '/home',
        component: Home,
        children: [
            {
                name: 'HomeIndex',
                path: 'index',
                component: HomeIndex
            },
            {
                name: 'HomeMovie',
                path: 'movie',
                component: HomeMovie
            },
            {
                path: '',
                component: HomeIndex
            }
        ]

在home組件里直接push到HomeIndex

# Home.vue
<template>
    <div id="home">
        <router-view/>
    </div>
</template>

<script>
    export default {
        name: "home",
        created: function () {
            this.$router.push({name: 'HomeIndex'});
        }
    }
</script>

<style scoped>

</style>

#Index.vue
<template>
    <div id="index">
        <button @click="nextPage">點我進入下一頁</button>
    </div>
</template>

<script>
    export default {
        name: "index",
        methods: {
            nextPage: function () {
                this.$router.push({name: 'HomeMovie'})
            }
        }
    }
</script>

<style scoped>

</style>