【前端】Vue2全家桶案例《看漫画》之一、添加四个导航页

转载请注明出处：http://www.cnblogs.com/shamoyuu/p/vue_vux_app_1.html

项目github地址：https://github.com/shamoyuu/vue-vux-iconan

继续上一篇文章，这次以实际项目为主题。

我们做一个看漫画的APP，名字就叫爱柯南，但是不会只有柯南一个。

首先在components下新建main文件夹，用来存放4个主导航页。

在这个文件夹下新建4个vue文件，分别是Home.vue、News.vue、Classify.vue、Personal.vue，内容都一样

<template>
    <div>
        <h1>{{msg}}</h1>
        <img src="@/static/images/logo.png">
    </div>
</template>

<script>
    export default {
        data () {
            return {
                msg: "首页" //把这里都改一下
            }
        }
    }
</script>

<style scoped>
    
</style>

@这里可以简单地理解为src根路径。

然后修改tool/router/index.js文件

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/main/Home'
import News from '@/components/main/News'
import Classify from '@/components/main/Classify'
import Personal from '@/components/main/Personal'

Vue.use(Router);

export default new Router({
    routes: [
        {
            path: '/',
            redirect: '/home'
        },
        {
            path: '/home',
            name: 'home',
            component: Home
        },
        {
            path: '/news',
            name: 'news',
            component: News
        },
        {
            path: '/classify',
            name: 'classify',
            component: Classify
        },
        {
            path: '/personal',
            name: 'personal',
            component: Personal
        }
    ]
});

然后在components下新建Footer.vue文件，用来处理底部导航

<template>
    <tabbar @on-index-change="foo">
        <tabbar-item selected>
            <img slot="icon" src="../assets/images/homepage.png">
            <img slot="icon-active" src="../assets/images/homepage_fill.png">
            <span slot="label">首页</span>
        </tabbar-item>
        <tabbar-item>
            <img slot="icon" src="../assets/images/flashlight.png">
            <img slot="icon-active" src="../assets/images/flashlight_fill.png">
            <span slot="label">最新</span>
        </tabbar-item>
        <tabbar-item>
            <img slot="icon" src="../assets/images/createtask.png">
            <img slot="icon-active" src="../assets/images/createtask_fill.png">
            <span slot="label">分类</span>
        </tabbar-item>
        <tabbar-item>
            <img slot="icon" src="../assets/images/people.png">
            <img slot="icon-active" src="../assets/images/people_fill.png">
            <span slot="label">我的</span>
        </tabbar-item>
    </tabbar>
</template>

<script>
    import {Tabbar, TabbarItem} from 'vux'
    import router from '@/tool/router/index.js'
    
    export default {
        name: 'AppFooter',
        components: {
            Tabbar,
            TabbarItem
        },
        methods: {
            foo: function (newindex, oldindex) {
                switch (newindex){
                    case 0 :
                        router.replace('/home');
                        break;
                    case 1:
                        router.replace('/news');
                        break;
                    case 2:
                        router.replace('/classify');
                        break;
                    case 3:
                        router.replace('/personal');
                        break;
                }
            }
        }
    }
</script>
<style>
    
</style>

需要注意的是，我们这里并不采用vux官方API里demo的跳转方式（在TabbarItem上加link），而是用on-index-change事件，在这个事件里我们通过router.replace来切换路由，否则你在多次点击底部导航之后再回退的话，会把前面点过的再回退一遍。

我们再添加几个less样式，来初始化和添加全局样式。

在assets下新建less文件夹，在里面新建

app.less

#app {
    .weui-tabbar__item.weui-bar__item_on .weui-tabbar__icon,
    .weui-tabbar__item.weui-bar__item_on .weui-tabbar__icon > i,
    .weui-tabbar__item.weui-bar__item_on .weui-tabbar__label {
        color: #1296DB
    }
}

reset.less

button {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-appearance: none;
    padding: 0;
    margin: 0;
    outline: none;
    border: none;
    border-radius: 0;
    background: transparent;
}

main.less

@import '~vux/src/styles/reset.less';
@import "reset";
@import "app";

然后修改APP.vue文件

<template>
    <div id="app">
        <router-view/>
        <app-footer></app-footer>
    </div>
</template>

<script>
    import AppFooter from './components/Footer.vue'
    
    export default {
        name: 'app',
        components: {
            AppFooter
        }
    }
</script>

<style lang="less">
    @import "./assets/less/main.less";
</style>

 

上面用到的几个图片，可以直接到github里下载。