城市选择页面的 路由配置 跳转
,点击返回按钮可返回到首页,页面大概是这样的
打开码云,创建city-router分支
cd到文件夹 输入 git pull然后输入git checkout city-router 然后npm run dev
首先配置路由这部分的内容
打开src/router下的index.js 配置路由
第二步在pages页面新建city文件夹,新建City.vue文件
路由配好了,如何实现点击城市,实现跳转呢
首先回到header.vue 区,在城市的区域添加router-link标签,里面填写路径
现在完善city页面
在pages目录下,新建components文件夹,新建Header.vue
同时要在City.vue页面引入Header.vue
然后改变下字体
下面做返回箭头
在home.vue里添加
这里是箭头样式设置
点击返回按钮回到首页怎么做呢
回到city文件夹下的 Header.vue 给返回按按钮加一个link 路径to="/'表示根路径
别忘了给箭头添加color.
有些属性是平常要用的,例如header的行高所以在vatibles.styl定义
然后把heade.vue里的.header的行高改了
同时在home页面的header.vue里也要改一下头部的行高
然后把代码传到git仓库里
git add .
git commit -m 'city router'
git push
然后切换到主分支
git checkout master
然后让主分支融合city-router
git merge city-router
然后把主分支的内容提交到线上
git push