zoukankan      html  css  js  c++  java
  • Vue2.5 旅游项目实例10 城市选择页-路由配置

    创建分支:city-router

    拉取到本地并切换分支:

    git pull
    git checkout city-router

    然后配置路由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
        }
      ]
    })

    在pages下新建city文件夹,创建City.vue文件

    我们希望的是在首页点击头部的“北京”,跳到City.vue页,修改home下的Header.vue代码:

    <router-link to="/city">
        <div class="header-right">{{this.city}} <i class="iconfont arrow-icon">&#xe64a;</i></div>
    </router-link>
    
    <style lang="stylus" scoped>
    .header-right
      color: #fff
    </style>

    然后继续编辑City.vue页:

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

    在city文件夹下,新建components文件夹,创建Header.vue文件:

    <template>
    <div class="header">
      <router-link to="/">
        <div class="header-left"><div class="iconfont back-icon">&#xe624;</div></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
      font-size: .32rem
      background: $bgColor
      .back-icon
        position:absolute
        top:0
        left:0
         .64rem
        text-align: center
        font-size: .4rem
        color: #fff
    </style>

    效果图:

    上传代码:

    git add .
    git commit -m "ciyt-router"
    git push

    合并代码:

    git checkout master
    git merge city-router
    git push
  • 相关阅读:
    Linux:mv命令
    Linux:cp -rp
    Linux:sed命令
    Linux:cut命令...未完待续
    Linux:xargs命令
    python动态获取对象的属性和方法 (转载)
    python 继承中的super
    HTTP认证机制(翻译)
    技术名词解释
    设计模式之代理模式
  • 原文地址:https://www.cnblogs.com/joe235/p/12469277.html
Copyright © 2011-2022 走看看