Creating a branch: city-router
And pulling the local branch switching:
git pull
git checkout city-router
Then configure the routing index.js:
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 } ] })
New city folder in pages, create a file City.vue
We hope that at the head of the home page click on "Beijing", jump City.vue page, modify the code under Header.vue home:
<router-link to="/city"> <div class="header-right">{{this.city}} <i class="iconfont arrow-icon"></i></div> </router-link> <style lang="stylus" scoped> .header-right color: #fff </style>
Then continue editing City.vue page:
<template> <div> <city-header></city-header> </div> </template> <script> import CityHeader from './components/Header' export default { name: 'City', components: { CityHeader } } </script>
In the city the folder, the new components folder, create Header.vue file:
<template> <div class="header"> <router-link to="/"> <div class="header-left"><div class="iconfont back-icon"></div></div> </router-link> City Select </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 font-size: .32rem background: $bgColor .back-icon position:absolute top:0 left:0 width: .64rem text-align: center font-size: .4rem color: #fff </style>
Renderings:
Upload Code:
git add .
git commit -m "ciyt-router"
git push
Merge code:
git checkout master
git merge city-router
git push