上一章节我们已经把项目的初始化工作完成了，接下来我们再来进行具体的代码编写。这一节我们将完成如下的页面。
我们在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>
由于这个部分是在整个app里都是会显示的，所以我们在App.vue里对组件进行引用。修改App.vue,如下：
<template>
<div id="app">
<router-view></router-view>
<!--使用我们的footerNav组件 -->
<footerNav></footerNav>
</div>
</template> <script>
//使用前必须进行引入
import footerNav from './components/footerNav.vue'
export default {
data(){
return { }
},
components:{
footerNav
}
}
</script> <style> </style>
然后再对route里的index.js进行修改，配置页面的路由策略，如下：
import Vue from 'vue'
import Router from 'vue-router'
//所有组件都要进行引用
import movie from '@/views/movie.vue'
import me from '@/views/me.vue'
import cinema from '@/views/cinema.vue' Vue.use(Router) export default new Router({
routes: [
{
path: '/',//路径
name: 'movie',
component: movie //对应的组件
},{
path: '/me',
name: 'me',
component: me
},{
path: '/cinema',
name: 'cinema',
component: cinema
}
]
})
最后一步工作进行在整个项目的入口文件根目录下的index.html文件做一个移动端的简单适配，加入meta标签，修改后如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 移动端适配 -->
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1">
<title>淘票票</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
然后npm run build 启动项目，如果一切顺利应该会有如下页面。
注：本文出自博客园 https://home.cnblogs.com/u/mdengcc/ ，转载请注明出处。