Vue2+VueRouter2+webpack 构建项目实战(六)加入tab栏切换,拓展项目
本文参考 fungLeo大神的博客,本人现在学习vue,仅仅当做笔记。大神链接:http://blog.csdn.net/fungleo/article/details/53171052好了,开始开动吧!!!首先安装以下目录创建文件夹然后相应的文件里面加入代码//happy.vueuser happy page//index.vue这个就是更加详细的页
·
本文参考 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栏复用点击切换页面内容,点击内容进入下一级
![奋斗](http://static.blog.csdn.net/xheditor/xheditor_emot/default/struggle.gif)
更多推荐
所有评论(0)