修改App.vue
我们常在开发中碰到这个问题:设计师给我的图纸是一个界面占满整个屏幕,但是我们的界面总是能左右稍微滑动一点
我们可以在app.vue中添加以下的css代码即可解决该问题
#app {
touch-action:none;
touch-action:pan-y;
}
项目目录
开发首页界面
设计图
结构很简单,上面的头部内容不变,下部的内容随着用户点击导航条而改变
构建首页骨架
在pages中新建一个index的文件夹,首页界面下部内容主要分4个,所以我们在components中新建4个vue组件,再新建一个head组件用以构建首页界面上部不变的部分
在首页界面中,我们用head组件存放不变的部分,下方放置一个router-view用以存放首页下半部分变化的内容
编写head组件
<template>
<div class="wrapper">
<div class = "logo">
<img src="./tomato.png" alt="">
<span>Tomota Music</span>
</div>
<ul class='nav'>
<router-link tag = "li" to = "/rank"> <span>排行</span> </router-link>
<router-link tag = "li" to = "/recommend"> <span>推荐</span> </router-link>
<router-link tag = "li" to = "/search"> <span>搜索</span> </router-link>
<router-link tag = "li" to = "/singer"> <span>歌手</span> </router-link>
</ul>
</div>
</template>
<script>
export default {
components: {},
data () {
return {
}
},
methods: {},
created () {},
mounted () {}
}
</script>
<style lang = "less" scoped>
.wrapper{
background-color: @bgColor;
.logo{
display: flex;
justify-content: center;
align-items: center;
color: @font-color-theme;
line-height: .88rem;
font-size: @font-size-large;
img{
height: 30px;
margin-right: 5px;
}
}
.nav{
display: flex;
justify-content: space-around;
height: .8rem;
line-height: .8rem;
color: #676767;
}
.active-link{
color: @font-color-theme;
&:after{
display: block;
content: "";
height: 2px;
width: 90%;
margin: 0 auto;
background-color: @font-color-theme;
transform: translateY(-8px);
}
}
}
</style>
编写具体内容组件
修改路由文件
配置嵌套路由
因为我们在首页界面中很清晰的看到,在index界面中嵌套了rank,recommend等组件,
我们根据路由来决定展示那个组件,所以我们需要按下图来配置路由文件
配置默认路由
例如,当我们跳转至"/“路径时,我们希望转发至”/index"路径,从而展示首页界面时,可以如下配置
redirect () {
return '/index'
}
配置路由高亮
我们要实现下图的效果,实现当前的路由对应的按钮的高亮效果,
我们可以看到vue自动给该按钮添加了一个class名,
而添加的这个class名我们可以通过配置路由文件,进行自定义
Vue.use(Router)
export default new Router({
linkActiveClass: '自定义的高亮class名',
路由文件完整代码
import Vue from 'vue'
import Router from 'vue-router'
import Index from '@/pages/Index/Index'
import Rank from '@/pages/Index/components/Rank'
import Recommend from '@/pages/Index/components/Recommend'
import Search from '@/pages/Index/components/Search'
import Singer from '@/pages/Index/components/Singer'
Vue.use(Router)
export default new Router({
linkActiveClass: 'active-link',
routes: [
{
path: '/',
redirect () {
return '/index'
}
},
{
path: '/index',
name: 'Index',
component: Index,
children: [
{
path: '/',
redirect () {
return '/rank'
}
},
{
path: '/rank',
name: 'Rank',
component: Rank
},
{
path: '/recommend',
name: 'Recommend',
component: Recommend
},
{
path: '/search',
name: 'Search',
component: Search
},
{
path: '/singer',
name: 'Singer',
component: Singer
}
]
}
]
})