城市选择页面路由配置

1. 创建分支city-router并拉到线下，重启项目。
2. 配置路由
进入到src目录下的router文件夹下的index.js，创建新路由路径为根目录下的city，名字为City，引入组件：

然后到pages下创建文件夹city，在city文件夹中创建City.vue组件，以及components文件夹：
3. 我们希望点击“北京”时，进入到City页面：

– 回到home文件夹下，找到Header.vue，希望点击header-right时，页面会发生跳转：

将router-link标签包裹在header-right区域的外侧，意思是点击router-link里面的区域，实现页面跳转到“/city”这个路径。而这个路径已经做了配置，所以City这个组件就会显示到页面上。Router-link标签相当于一个a标签，可以完成页面的跳转。有默认的颜色，使“北京“变成灰色，这时需要设置颜色，就可以恢复白色了：

– 我们预期要实现的效果：

在components文件夹下创建一个Header.vue的文件：

在City根组件中引入注册并使用：

效果：

– 做返回的箭头，粘入icon-font中的字符串：

然后修改样式，记住一定要定位，不然不会显示出来：

– 点击返回箭头，返回到首页，同时修改router-link自带的颜色：

– 定义.86rem这个公共的值为一个变量并修改Home和City组件里的Header对应的.86rem为￥headerHeight：

4. 同步到线上

• 添加目录下所有发生改变的文件到本地暂存区：git add .
• 其中city_router为注释信息：git commit -m city_router
• git push
• 切换回主分支：git checkout master
• 让主分支合并新分支：git merge city-router
• 然后把主分支的内容在提交到线上：git push