Vue 项目实战系列 （二）

　　上一章节我们已经把项目的初始化工作完成了，接下来我们再来进行具体的代码编写。这一节我们将完成如下的页面。

 

　　我们在src/目录下新建一个views文件夹，存放我们的主要页面文件。目录结构如下：

　　

　　cinema.vue如下：

<template>
    <div>
        cinema
    </div>
</template>

　　movie.vue如下：

<template>
    <div>
        movie
    </div>
</template>

　　me.vue如下：

<template>
    <div>
        me
    </div>
</template>

　　这里三个相当一级路由的路由页面就有了。然后再看看具体的footerNav这个组件如何写。一个组件一般包含三个部分：

<template>
　　html部分
</template>
<script>
　　js代码部分
</script>
<style>
　　css样式部分
</style>

先看看template部分的代码：

<template>
    <footer>
        <section class="footer mint-1px-t">
            <!-- 当route是 / 的时候会有cur-page 这个class-->
              <nav class="nav nav-movie" :class="{'cur-page': route === '/'}">
                  <!-- router-link标签配置vue-router插件会路由到to 后面对应的页面 -->
                  <router-link to="/">
                      <div class="nav-icon">
                          <!-- 根据当前的路径展示不同的图片 -->
                          <img v-show="route !== '/'" src="../assets/images/hno.svg" alt="">
                          <img v-show="route === '/'" src="../assets/images/hok.svg" alt="">
                      </div>
                  </router-link>
              </nav>
              <nav class="nav nav-cinama" :class="{'cur-page': route === '/cinema'}">
                <router-link to="cinema">
                    <div class="nav-icon">
                        <img v-show="route !== '/cinema'" src="../assets/images/mno.svg" alt="">
                        <img v-show="route === '/cinema'" src="../assets/images/mok.svg" alt="">
                    </div>
                </router-link>
              </nav>
              <nav class="nav nav-me" :class="{'cur-page': route === '/me'}">
                  <router-link to="me">
                      <div class="nav-icon">
                          <img v-show="route !== '/me'" src="../assets/images/eno.svg" alt="">
                          <img v-show="route === '/me'" src="../assets/images/eok.svg" alt="">
                      </div>
                  </router-link>
              </nav>
          </section>
    </footer>
</template>

文件里对应的图片文件可以到 https://github.com/EzrealDeng/Taopiaopiao/tree/master/src/assets 上面获取，放到src assets目录下。

script部分如下：

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

            }
        },
        computed: {
            route () {
                return this.$route.path
            }
            //等价于 route : function(){
            //            return this.$route.path
            //        }
            //这种写法
            //
        }
    }
</script>

再加上style部分这个组件就算完成了。最终footerNav.vue代码如下：

<template>
    <footer>
        <section class="footer mint-1px-t">
            <!-- 当route是 / 的时候会有cur-page 这个class-->
              <nav class="nav nav-movie" :class="{'cur-page': route === '/'}">
                  <!-- router-link标签配置vue-router插件会路由到to 后面对应的页面 -->
                  <router-link to="/">
                      <div class="nav-icon">
                          <!-- 根据当前的路径展示不同的图片 -->
                          <img v-show="route !== '/'" src="../assets/images/hno.svg" alt="">
                          <img v-show="route === '/'" src="../assets/images/hok.svg" alt="">
                      </div>
                  </router-link>
              </nav>
              <nav class="nav nav-cinama" :class="{'cur-page': route === '/cinema'}">
                <router-link to="cinema">
                    <div class="nav-icon">
                        <img v-show="route !== '/cinema'" src="../assets/images/mno.svg" alt="">
                        <img v-show="route === '/cinema'" src="../assets/images/mok.svg" alt="">
                    </div>
                </router-link>
              </nav>
              <nav class="nav nav-me" :class="{'cur-page': route === '/me'}">
                  <router-link to="me">
                      <div class="nav-icon">
                          <img v-show="route !== '/me'" src="../assets/images/eno.svg" alt="">
                          <img v-show="route === '/me'" src="../assets/images/eok.svg" alt="">
                      </div>
                  </router-link>
              </nav>
          </section>
    </footer>
</template>
<script>
    export default{
        data(){
            return {

            }
        },
        computed: {
            route () {
                return this.$route.path
            }
            //等价于 route : function(){
            //            return this.$route.path
            //        }
            //这种写法
            //
        }
    }
</script>
<style>
    /*这里是样式文件*/
    .footer {
        background-color: #fff;
        position: fixed;
        width: 100%;
        bottom: 0px;
        height: 50px;
        display: -webkit-box; 
        padding-top: 7px;
        box-sizing: border-box;
        z-index: 10000;
    }
    .footer nav {
        -webkit-box-flex: 1;
        text-align: center;
        color: #8a869e;
    }
    .footer .cur-page.nav{
        color: #ff4d64;
    }
    .nav-icon {
        width: 22px;
        height: 22px;
        margin: 0 auto;
    }
    .nav-icon img {
        width: 100%;
        height: 100%;
    }
    .nav-movie::after,
    .nav-cinama::after,
    .nav-me::after {
        padding-top: 2px;
        text-align: center;
        width: 30px;
        display: inline-block;
        font-size: 12px;
    }
    .nav-movie::after {
        content: "电影";
    }
    .nav-cinama::after {
        content: "影院";
    }
    .nav-me::after {
        content: "我的";
    }
    .go-back {
        background: #ff2c43;
    }
    .back {
        font-size: 30px;
        color: #fff;
        padding-left: 35px;
        margin-top: -4px;
        transform: scaleY(1.5);
    }
</style>

View Code