vue商城路由配置及组件的使用

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/BeautyBeier/article/details/78962383

1.vue路由的配置

1)vue项目

import Vue from 'vue' //引入vue
import Router from 'vue-router' //引入路由信息

Vue.use(Router) //初始化路由信息

const MemberStore = (resolve) => {
  import('components/memberStore/memberStore').then((module) => {
    resolve(module)
  })
}

const More = (resolve) => {
  import('components/more/more').then((module) => {
    resolve(module)
  })
}
export default new Router({
  routes: [
  //规定默认的路径，定义进入默认的路由页面
    {
      path: '/',
      redirect: '/more'
    },
    {
      path: '/memberStore',
      component: MemberStore
    },
    {
      path: '/order',
      component: Order,
      children: [   //子路由
        {
          path: 'allOrder',
          component: AllOrder
        },
        {
          path: 'orderDetail',
          component: OrderDetail
        }
      ]
    },
    {
      path:'/delivery',
      component:Delivery
    },
    {
      path: '/rateShop',
      component: RateShop
    }

  ]
})

注：如果使用ECMAScript6语法，webStorm会提示错误，因此需要在webStorm设置

2)路由切换的时候，导航的颜色随着路由的切换而改变；可以在less文件里，下面的导航代码

 <footer class="footer">
    <ul class=" ui-rows ui-rows-bottom footer-menu">
     <li class="ui-cols">
        <router-link to="/memberStore">
          <i class="iconfont icon-huiyuantuijian">
          </i>
          <div>优选推荐</div>
        </router-link>
      </li>
      <li class="ui-cols">
        <router-link to="/more">
          <i class="iconfont icon-gengduoshangpin">
          </i>
          <div>更多商品</div>
        </router-link>
      </li>
      <li class="ui-cols" ref="shopcart">
        <router-link to="/cart">
          <i class="iconfont icon-gouwuche">
          </i>
          <div>购物车</div>
        </router-link>
      </li>
      <li class="ui-cols">
        <router-link to="/my">
          <i class="iconfont icon-wode">
          </i>
          <div>我的</div>
        </router-link>
      </li>
    </ul>
  </footer>

<router-link></router-link>标签的DOM结构如下图所示

可以看到当前的路由显示的DOM中class名为router-link-active,导航使用的图标是iconfont，在less里添加

.router-link-active{
  color:#ec6941;
}

2)组件的编写和使用
在vue项目中组件的使用是必须的，可以分为基础组件（项目中经常使用的轮播组件、loading组件、地址组件等）和项目的组件（m-header组件），基础组件是开发项目经常使用的组件，在以后的项目开发中也可以使用。

 import Scroll from 'base/scroll/scroll'
  import TopNews from 'base/top-news/top-news'
  import Weather from 'base/weather/weather'
  import nomore from 'base/nomore/nomore'

  export default {
    components:{
      nomore,
      Scroll,
      TopNews,
      Weather
  }
  }

也可以是用一些开源的css框架如mint-ui,
链接地址http://mint-ui.github.io/#!/zh-cn，它适用于移动端组件库,其中的一些组件库下拉刷新、弹出框等
2)封装slide轮播组件
slide轮播是在BScroll组件的基础上封装的，BScroll可直接使用npm install 安装，package.json "better-scroll": "^1.5.6",

<template>
  <div class="slider" ref="slide">
    <div class="slider-group" ref="slideGroup">
      <slot></slot>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
//引入基础的移动端滑动组件BScroll
  import BScroll from 'better-scroll'
  import {addClass} from 'common/js/dom'

  export default {
    name: 'slider',
    props: {
      loop: {
        type: Boolean,
        default: true
      },
      autoPlay: {
        type: Boolean,
        default: true
      },
      interval: {
        type: Number,
        default: 3000
      },
      showDot: {
        type: Boolean,
        default: false
      },
      click: {
        type: Boolean,
        default: true
      }
    },
    data() {
      return {
        dots: [],
        currentPageIndex: 0
      }
    },
    mounted() {
      this.update()
      window.addEventListener('resize', () => {
        if (!this.slide || !this.slide.enabled) {
          return
        }
        clearTimeout(this.resizeTimer)
        this.resizeTimer = setTimeout(() => {
          if (this.slide.isInTransition) {
            this._onScrollEnd()
          } else {
            if (this.autoPlay) {
              this._play()
            }
          }
          this.refresh()
        }, 60)
      })
    },
    activated() {
      if (!this.slide) {
        return
      }
      this.slide.enable()
      let pageIndex = this.slide.getCurrentPage().pageX
      if (pageIndex > this.dots.length) {
        pageIndex = pageIndex % this.dots.length
      }
      this.slide.goToPage(pageIndex, 0, 0)
      if (this.loop) {
        pageIndex -= 1
      }
      this.currentPageIndex = pageIndex
      if (this.autoPlay) {
        this._play()
      }
    },
    deactivated() {
      this.slide.disable()
      clearTimeout(this.timer)
    },
    beforeDestroy() {
      this.slide.disable()
      clearTimeout(this.timer)
    },
    methods: {
      update() {
        if (this.slide) {
          this.slide.destroy()
        }
        this.$nextTick(() => {
          this.init()
        })
      },
      refresh() {
        this._setSlideHeight(true)
        this.slide.refresh()
      },
      next() {
        this.slide.next()
      },
      init() {
        clearTimeout(this.timer)
        this.currentPageIndex = 0
        this._setSlideWidth()
        if (this.showDot) {
          this._initDots()
        }
        this._initSlide()
        if (this.autoPlay) {
          this._play()
        }
      },
      _setSlideWidth(isResize) {
        this.children = this.$refs.slideGroup.children
        let width= 0
        let slideWidth = this.$refs.slide.clientWidth
        for (let i = 0; i < this.children.length; i++) {
          let child = this.children[i]
          addClass(child, 'slide-item')
          child.style.width= slideWidth + 'px'
          width+= slideWidth
        }
        if (this.loop && !isResize) {
          width+= 2 * slideWidth
        }
        this.$refs.slideGroup.style.width = width+ 'px'
      },
      _initSlide() {
          //初始化BScroll
        this.slide = new BScroll(this.$refs.slide, {
          scrollX:true,
          scrollY: false,
          momentum: false,
          snap: {
            loop: this.loop,
            threshold: 0.3,
            speed: 400
          },
          click: this.click
        })
        this.slide.on('scrollEnd', this._onScrollEnd)
        this.slide.on('touchend', () => {
          if (this.autoPlay) {
            this._play()
          }
        })
        this.slide.on('beforeScrollStart', () => {
          if (this.autoPlay) {
            clearTimeout(this.timer)
          }
        })
      },
      _onScrollEnd() {
        let pageIndex = this.slide.getCurrentPage().pageX //获取当前的页数
        if (this.loop) { 
          pageIndex -= 1
        }
        this.currentPageIndex = pageIndex
        if (this.autoPlay) {
          this._play()
        }
      },
      _initDots() {
        this.dots = new Array(this.children.length)
      },
      _play() {
        let pageIndex = this.slide.getCurrentPage().pageX + 1
        if (this.loop) {
          pageIndex += 1
        }
        clearTimeout(this.timer)
        this.timer = setTimeout(() => {
          this.slide.goToPage(pageIndex, 0, 400)
        }, this.interval)
      }
    }
  }

</script>

<style scoped lang="less" rel="stylesheet/less">

  .slider{
    height:0.47rem;
    min-height:0.01rem;
    .slider-group{
      position:relative;
      overflow:hidden;
      white-space:nowrap;
    }
  }
</style>

轮播组件是很多项目中经常会用到的，自己也可以封装上拉刷新、下拉加载等组件，这些基础的组件在以后开发项目中会经常使用。
3)下面的这个商城示例就是使用vue开发的移动端微商城