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

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

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

此路径表示 /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

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">&#xe64a;</span>
      </div>
    </router-link>

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

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

<template>
  <div class="header">城市选择
//返回主页的路由
    <router-link to='/'>
      <div class="iconfont header-back">&#xeb99;</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>

完成效果:

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

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

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

猜你喜欢