转载请注明出处，未经同意，不可修改文章内容。
🔥🔥🔥“前端一万小时”两大明星专栏——“从零基础到轻松就业”、“前端面试刷题”，已于本月大改版，合二为一，干货满满，欢迎点击公众号菜单栏各模块了解。
1 需求
点击首页的城市区域“北京”，跳转至“城市选择页”。点击城市选择页的“返回”图标，可回到首页：
2 路由配置
🔗前置知识：
《Vue 实战准备——③ 单文件组件与 Vue 中的“路由”》
《Vue 实战准备——④ 单页应用 🆚 多页应用》
1️⃣在 src 下的 pages 中新建 city 文件夹（即“城市选择页”），并在 city 文件夹中新建一个 City.vue ：
<template>
<div>this is City.</div> <!-- 1️⃣-②：在模板中添加文字内容。 -->
</template>
<script>
export default {
name: 'City' /* 1️⃣-①：命名城市选择页为 City； */
}
</script>
<style>
</style>
2️⃣打开 src 下 router 中的 index.js ：
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/pages/home/Home'
import City from '@/pages/city/City' /*
2️⃣-①：从 src 下 pages 中的 city 文件中引入
城市选择页 City.vue；
*/
Vue.use(Router)
export default new Router({
routes: [{
path: '/',
name: 'Home',
component: Home
}, {
path: '/city', /* 2️⃣-③：City 的路径是 /city； */
name: 'City', /* 2️⃣-②：在路由项中，创建一个名叫 City 的路由； */
component: City /* 2️⃣-④：City 对应的组件是 City.vue。 */
}]
})
3️⃣打开 src 下的 pages 中 home 里首页的 Header.vue ：
<template>
<div class="header">
<div class="header-left">
<span class="iconfont back-icon"></span>
</div>
<div class="header-input">
<span class="iconfont"></span>
输入城市/景点/游玩主题
</div>
<router-link to="/city"> <!-- 3️⃣-①：使用 router-link 包裹首页头部右边的“城市区域”；
3️⃣-②：添加 to 属性，点击“城市区域”后跳转至 /city 路径
（即进入城市选择页）； -->
<div class="header-right">
{{this.city}}
<span class="iconfont arrow-icon"></span>
</div>
</router-link>
</div>
</template>
<script>
export default {
name: 'HomeHeader',
props: {
city: String
}
}
</script>
<style lang="stylus" scoped>
@import '~styles/varibles.styl'
.header
display: flex
line-height: .86rem
color: #fff
background: $bgColor
.header-left
float: left
width: .64rem
.back-icon
display: block
text-align: center
font-size: .56rem
.header-input
flex: 1
margin-top: .12rem
margin-left: .2rem
padding-left: .12rem
height: .64rem
line-height: .64rem
color: #ccc
background: #fff
border-radius: .1rem
.header-right
float: right
width: 1.24rem
text-align: center
color: #fff /* 3️⃣-③：给 header-right 添加颜色，调整链接的字体颜色为白色。 */
.arrow-icon
margin-left: -0.1rem
</style>
保存后，返回页面查看，点击首页“北京”，跳转至城市选择页 City.vue ：
3 城市选择页 Header 组件的“结构”与“样式”
城市选择页的头部与首页头部类似，仅分为左边的“返回”图标，和居中显示的“城市选择”：
4️⃣在 pages 下的 city 中新建 components 文件夹，并新建城市列表页的头部组件 Header.vue ：
<template>
<div>this is CityHeader.</div> <!-- 4️⃣-②：添加文字内容； -->
</template>
<script>
export default {
name: 'CityHeader' /* 4️⃣-①：组件命名为 CityHeader； */
}
</script>
<style lang="stylus" scoped>
</style>
4️⃣-③：打开 pages 下 city 中的 City.vue ；
<template>
<div>
<city-header></city-header>
</div>
</template>
<script>
import CityHeader from './components/Header' /*
4️⃣-④：从当前目录下的 components 中引入
Header.vue；
*/
export default {
name: 'City',
components: { /* 4️⃣-⑤：注册局部组件 CityHeader。 */
CityHeader
}
}
</script>
<style>
</style>
保存后，返回页面查看，页面正确显示 Header.vue 的内容，控制台无报错：
5️⃣打开 city 下的 Header.vue ，编写结构与样式（样式上与首页保持统一）：
<template>
<div class="header"> <!-- 5️⃣-①：div 增加类名为 header，其中的 内容为一个“返回”图标
和文字内容“城市选择”； -->
<router-link to="/"> <!-- 5️⃣-⑤：使用 router-link 标签包裹返回图标；
5️⃣-⑥：添加 to 属性，当点击时，跳转至根路径 / （即首页）； -->
<span class="iconfont header-back"></span>
</router-link>
城市选择
</div>
</template>
<script>
export default {
name: 'CityHeader'
}
</script>
<style lang="stylus" scoped>
/* 5️⃣-②：从 styles 下引入 varibles.styl； */
@import '~styles/varibles.styl'
.header /*
5️⃣-③：.header 的高度、行高为 0.86rem，字体颜色为白色，内容居中显示，字体大小
调整为 0.32rem,背景色为变量 $bgcolor 的颜色；
*/
position: relative
overflow: hidden
height: .86rem
line-height: .86rem
color: #fff
text-align: center
font-size: .32rem
background: $bgColor
.header-back /*
5️⃣-④：.header-back 相对于父元素 .header 绝对定位，与上、左的距离为 0，
宽度为 0.64rem，内容居中显示，字体大小为 0.56rem；
*/
position: absolute
top: 0
left: 0
width: .64rem
text-align: center
font-size: .56rem
color: #fff /* 5️⃣-⑦：更改链接字体颜色为白色。 */
</style>
保存后，返回页面查看，点击“返回”图标，可跳转至首页。“首页”与“城市选择页”间跳转流畅：
4 代码优化
在项目中，不同页面的样式要保持统一。而首页的头部与城市列表页的头部高度、行高的值都是 0.86rem 。所以，我们可以再新增一个变量 $headerHeight 。
6️⃣打开 src 下的 assets 中的 styles 目录里的文件 variables.styl ：
$bgColor = #00bcd4
$darkTextColor = #333
$headerHeight = .86rem /* 6️⃣-①：新增头部高度变量； */
6️⃣-②：打开 city 下 components 中的 Header.vue ，在城市选择页的头部组件使用变量；
<template>
<div class="header">
<router-link to="/">
<span class="iconfont header-back"></span>
</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 /* ❗️在高度和行高处，使用变量替换 0.86rem。 */
line-height: $headerHeight
color: #fff
text-align: center
font-size: .32rem
background: $bgColor
.header-back
position: absolute
top: 0
left: 0
width: .64rem
text-align: center
font-size: .56rem
color: #fff
</style>
6️⃣-③：打开 home 下 components 中的 Header.vue ，在首页的头部组件使用变量。
<template>
<div class="header">
<div class="header-left">
<span class="iconfont back-icon"></span>
</div>
<div class="header-input">
<span class="iconfont"></span>
输入城市/景点/游玩主题
</div>
<router-link to="/city">
<div class="header-right">
{{this.city}}
<span class="iconfont arrow-icon"></span>
</div>
</router-link>
</div>
</template>
<script>
export default {
name: 'HomeHeader',
props: {
city: String
}
}
</script>
<style lang="stylus" scoped>
@import '~styles/varibles.styl'
.header
display: flex
line-height: $headerHeight /* ❗️在行高处，使用变量替换 0.86rem。 */
color: #fff
background: $bgColor
.header-left
float: left
width: .64rem
.back-icon
display: block
text-align: center
font-size: .56rem
.header-input
flex: 1
margin-top: .12rem
margin-left: .2rem
padding-left: .12rem
height: .64rem
line-height: .64rem
color: #ccc
background: #fff
border-radius: .1rem
.header-right
float: right
width: 1.24rem
text-align: center
color: #fff
.arrow-icon
margin-left: -0.1rem
</style>
保存后，返回页面查看，页面显示正常，控制台无报错：
以上，我们就完成了“首页”与“城市选择页”间的页面跳转：
- 在首页上点击“城市区域”，可切换至“城市选择页”；
- 在“城市选择页”中，点击头部的“返回”图标，可回到首页。
祝好，qdywxs ♥ you！
