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

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开发的移动端微商城