City-router Final

src/assets/styles/variable.styl

@@ -1,2 +1,3 @@
 $bgColor = #00bcd4
-$darkTextColor = #333333
+$darkTextColor = #333333
+$headerHeight = .86rem

src/pages/city/City.vue

@@ -0,0 +1,17 @@
+<template>
+  <city-header></city-header>
+</template>
+
+<script>
+import CityHeader from "./components/header"
+export default {
+  name: "City",
+  components: {
+    CityHeader: CityHeader
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+
+</style>

src/pages/city/components/header.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="header">
+    城市选择
+    <router-link to="/">
+      <div class="iconfont header-back">&#xe658;</div>
+    </router-link>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "CityHeader"
+};
+</script>
+
+<style lang="stylus" scoped>
+@import '~styles/variable.styl'
+.header
+  position relative
+  overflow hidden
+  height $headerHeight
+  line-height $headerHeight
+  text-align center
+  color #ffffff
+  background $bgColor
+  font-size .32rem
+  .header-back
+    position absolute
+    top 0
+    left 0
+    width .64rem
+    text-align center
+    font-size .4rem
+    margin-left .1rem
+    color #ffffff
+</style>

src/pages/home/components/Header.vue

@@ -6,9 +6,11 @@
     <div class="header-input">
       <span class="iconfont search-icon">&#xe63c;</span>输入城市景点游玩主题
     </div>
-    <div class="header-right">
-      {{ this.city }}<span class="iconfont">&#xe65c;</span>
-    </div>
+    <router-link to="/city">
+      <div class="header-right">
+        {{ this.city }}<span class="iconfont">&#xe65c;</span>
+      </div>
+    </router-link>
   </div>
 </template>
 
@@ -27,7 +29,7 @@ export default {
 @import '~styles/variable.styl'
 .header
     display flex
-    line-height .86rem
+    line-height $headerHeight
     background $bgColor
     color #ffffff
     .header-left
@@ -53,4 +55,5 @@ export default {
         width 1.24rem
         float right
         text-align center
+        color #ffffff
 </style>

src/router/index.js

@@ -1,6 +1,7 @@
 import Vue from "vue";
 import VueRouter from "vue-router";
-import Home from "../pages/home/home";
+import Home from "@/pages/home/Home";
+import City from "@/pages/city/City";
 
 Vue.use(VueRouter);
 
@@ -9,6 +10,10 @@ const routes = [
     path: "/",
     name: "Home",
     component: Home
+  },{
+    path: "/city",
+    name: "City",
+    component: City
   }
 ];