Vue2.5 学习笔记8.1 城市页面 router
主页写好了,接下来就是写城市列表页
1. 先去src/router/index.js中添加新的url路径
此路径表示 /city路径指向 src/pages/city/City.vue中的City
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/pages/home/Home'
import City from '@/pages/city/City'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Home',
component: Home
}, {
path: '/city',
name: 'City',
component: City
}
]
})
2. 建立city目录和与其相关的vue
3. 在City.vue中写入
<template>
<div>city</div>
</template>
<script>
export default {
name: 'City',
components: {
CityHeader
}
}
</script>
<style>
</style>
4. 接着在src/pages/home/compontents/Header.vue中的城市部分包裹<router-link to='/city'></router-link>
<router-link to="/city">
<div class="Header-right">
{{this.city}}
<span class="iconfont arrow-icon"></span>
</div>
</router-link>
这样就可以实现页面跳转了
5.接下来就是去写city中的Header.vue组件的代码就可以了
<template>
<div class="header">城市选择
//返回主页的路由
<router-link to='/'>
<div class="iconfont header-back"></div>
</router-link>
</div>
</template>
<script>
export default {
name: 'CityHeader'
}
</script>
<style lang="stylus" scoped>
@import '~styles/varibles.styl'
.header
position: relative
overflow: hidden
height: $headerHeight
line-height: $headerHeight
text-align: center
color: #fff
background: $bgColor
font-size: .32rem
.header-back
position: absolute
top: 0
left: 0
width: .64rem
text-align: center
font-size: .4rem
color: #fff
</style>
6.将Header.vue组件加入到City.vue中即可完成
//City.vue
<template>
<city-header></city-header>
</template>
<script>
import CityHeader from './components/Header'
export default {
name: 'City',
components: {
CityHeader
}
}
</script>
<style>
</style>
完成效果:
对了 有在src/assets/style/varibles.styl中添加了$headerHeight变量 以方便各个组件使用
$bgColor = #00bcd4
$darkTextColor = #333
$headerHeight = .86rem