Vue2.5 学习笔记8.1 城市页面 router

旧城等待， 2022-03-01 13:42 252阅读 0赞

主页写好了，接下来就是写城市列表页

1. 先去src/router/index.js中添加新的url路径

![20190322175147887.png][]

此路径表示 /city路径指向 src/pages/city/City.vue中的City

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
        }
      ]
    })

2. 建立city目录和与其相关的vue

![20190322175008731.png][]

3. 在City.vue中写入

<template>
      <div>city</div>
    </template>
    
    <script>
    export default {
      name: 'City',
      components: {
        CityHeader
      }
    }
    </script>
    
    <style>
    
    </style>

4. 接着在src/pages/home/compontents/Header.vue中的城市部分包裹<router-link to='/city'></router-link>

<router-link to="/city">
          <div class="Header-right">
            {
       {this.city}}
            <span class="iconfont arrow-icon"></span>
          </div>
        </router-link>

这样就可以实现页面跳转了

5.接下来就是去写city中的Header.vue组件的代码就可以了

<template>
      <div class="header">城市选择
    //返回主页的路由
        <router-link to='/'>
          <div class="iconfont header-back"></div>
        </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
        line-height: $headerHeight
        text-align: center
        color: #fff
        background: $bgColor
        font-size: .32rem
        .header-back
          position: absolute
          top: 0
          left: 0
          width: .64rem
          text-align: center
          font-size: .4rem
          color: #fff
    </style>

6.将Header.vue组件加入到City.vue中即可完成

//City.vue
    
    <template>
      <city-header></city-header>
    </template>
    
    <script>
    import CityHeader from './components/Header'
    export default {
      name: 'City',
      components: {
        CityHeader
      }
    }
    </script>
    
    <style>
    
    </style>

完成效果:

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NvdWx3eWI_size_16_color_FFFFFF_t_70][]

对了  有在src/assets/style/varibles.styl中添加了$headerHeight变量 以方便各个组件使用

$bgColor = #00bcd4
    $darkTextColor = #333
    $headerHeight = .86rem

[20190322175147887.png]: /images/20220301/25ea251fe3bc4294ae40801e0856f226.png
[20190322175008731.png]: /images/20220301/5a064f7905f74f37baaa9c30d88d93a5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NvdWx3eWI_size_16_color_FFFFFF_t_70]: /images/20220301/649def35a94344108b0a8bf23b59cc20.png