Vue2+VueRouter2+webpack 构建项目实战（六）加入tab栏切换，拓展项目

本文参考 fungLeo大神的博客，本人现在学习vue，仅仅当做笔记。大神链接：http://blog.csdn.net/fungleo/article/details/53171052

好了，开始开动吧！！！

首先安装以下目录创建文件夹

然后相应的文件里面加入代码

//happy.vue
<template>
  <div class="title">user happy page</div>
</template>

//index.vue
<template>
  <div class="title">这个就是更加详细的页面~~~</div>
</template>
<script>
	export default {
		data () {
			return {

			}
		}
	}
</script>

//info.vue
<template>
  <div class="title">
        <router-link to="/user/">
           点击详情更加详细~~~
        </router-link>
   </div>
</template>

//like.vue
<template>
  <div class="title">user like page</div>
</template>

//love.vue
<template>
  <div class="title">user love page</div>
</template>

然后 routes.js文件添加代码

import index from '../page/index.vue'
import content from '../page/content.vue'
// 配置路由
import Frame from '../frame/subroute.vue'
// 引入子页面
import userIndex from '../page/user/index.vue'
import userInfo from '../page/user/info.vue'
import userLove from '../page/user/love.vue'
import userLike from '../page/user/like.vue'
import userHappy from '../page/user/happy.vue'

export default [
  {
    path: '/',
    component: index
  },
  {
    path: '/content',
    component: content
  },
  {
	  path: '/user',
	  component: Frame,
	  children: [
	    {path: '/',component: userIndex},
	    {path: 'info',component: userInfo},
      {path: 'love',component: userLove},
      {path: 'like',component: userLike},
	    {path: 'happy',component: userHappy}
	  ],
	},
]

_common.scss文件  总得加点样式吧

	.title{
		font-size: 40px;
		margin-top: 50px;
		color: #e4393c;
	}

当然 style.scss必须引入

$static:"/static";
// base
@import "base/color";
@import "base/base";
@import "base/mixin";
@import "base/reset";
@import "base/font";
// style
@import "scss/index";
@import "scss/common";

最后一部分 App.vue 然后就可以看到效果了

<style>
  .router-link-active {
    color: #E4393C;
    font-size:22px;
  }
  .fade-enter-active,.fade-leave-acitve {
    transition: opacity .4s;
  }
  .fade-enter,.fade-leave-acitve {
    opacity: 0;
  }
  .main,.slide-nav{
    height: 60px;
  }
  .slide-out li{
    float: left;
    height: 60px;
    width: 120px;
    background-color: #ddd;
    font-size: 22px;
    line-height: 60px;
    margin-left: 2px;
    text-align: center;
  }
  .img{
    width: 100%；
  }
  img{
    width: 100%;
  }
</style>
<template>
  <div  class="main">
    <div class="img"><img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2139964329,1339306013&fm=15&gp=0.jpg" alt=""></div>
    <div class="slide-nav">
      <ul class="slide-out">
        <li class="index_1"><router-link  to="/" exact>文章专区</router-link></li>
        <li class="info_1"><router-link  to="/user/info">图片专区</router-link></li>
        <li class="love_1"><router-link  to="/user/love">音乐专区</router-link></li>
        <li class="like_1"><router-link  to="/user/like">电影专区</router-link></li>
        <li class="happy_1"><router-link  to="/user/happy">用户留言</router-link></li>
      </ul>
    </div>
    <div class="content">
          <transition name="fade"><router-view class="view" keep-alive transition-mode="out-in" :key="key"></router-view></transition>
    </div>
  </div>
</template>
<script>
  export default {
    components: {},
    computed: {
          key() {
              return this.$route.path.replace(/\//g, '_')
          }
    }
  }
</script>

<style lang="scss">
  @import "./style/style.scss";
</style>

duang~duang~duang~效果出来了  tab栏复用点击切换页面内容，点击内容进入下一级