【珍惜时间】h5-tzl

接下来我们一起欣赏美丽的项目喽~
先放作者大大的giuthub地址
https://github.com/summonLi/h5-tzl
接下来我们运行项目看看

运行项目就是这个界面，我们看看代码里面有什么蹊跷的
原来代码中加了这一句，如果不是移动端打开的就直接跳转到官网了

 if(/Android|webOS| iPhone | iPad | iPod |BlackBerry|opera mini|opera mobile|appleWebkit.*mobile|mobile/i.test(navigator.userAgent)) {
      }else{
        window.location.href = 'http://www.miare-china.com/';
      }

接下来我们看看效果

首先我们看看main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import Vuex from 'vuex'
import store from './store'
// import Mint from 'Mint-ui'
import { Tab, Tabs, Swipe, SwipeItem, Toast, Button, Popup, Pagination } from 'vant'
import 'vant/lib/index.css'
import '../static/js/flexible.js'

/**
 *监听浏览器点击返回前进操作动画
 *浏览器端使用需要注意路由path的创建，二级应该在一级的基础上添加
 *如一级/Home，则二级为/Home/Detail，依次往后加，如果是app的话可忽略以下代码
 */
let init = 0
window.addEventListener('popstate', function(e) {
  init++
  if (init < 2) {
    router.beforeEach((to, from, next) => {
      let arr1 = to.path.split('/')
      console.log('aaaa...1111',arr1)
      let arr2 = from.path.split('/')
      console.log('bbbbb....22222',arr2)
      if (arr1.length === 2) {
        
        if (arr1[1].length === 0) {
          arr1.splice(1, 1)
          console.log('ccccc',arr1)
        }
      }
      if (arr2.length === 2) {
        if (arr2[1].length === 0) {
          arr2.splice(1, 1)
        }
      }
      if (arr1.length < arr2.length) {
        router.toGoBack()
      } else {
        router.toGoIn()
      }
      next()
    })
  }
}, false)

Vue.use(Vuex)
// Vue.use(Mint)
Vue.use(Tab).use(Tabs).use(Swipe).use(SwipeItem).use(Toast).use(Button).use(Popup).use(Pagination)
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: ''
})

main.js中用popstate去监听浏览器返回还是前进
App.vue中挺有意思的

App.vue去监听了路由的变化
接下来我们看store.js里面的
home.js中写了一个登录的状态处理的代码

import request from '@utils/request'

const home = {
  state: {
    token:'',
    userInfo: {}
  },

  mutations: {
    SET_TOKEN:(state, token) => {
      state.token = token
    },
    USER_INFO: (state, userinfo) => {
      state.userInfo = userinfo
    }
  },

  action: {
    Login({ commit }, userInfo){
      const userName = userInfo.userName.trim();
      return new Promise((resolve,reject) => {
        request({
          url: '/api',
          method: 'post',
          data: {
            'userName': userName,
            'password':userInfo.passwork
          }
        }).then(response => {
          commit('SET_TOKEN',response.data.token);
          commit('USER_INFO',response.data);
          resolve()
        }).catch(error => {
          reject(error)
        })
      })
    }
  }
}

router.js中封装了一些去哪个方向的函数

//router.js
import Vue from 'vue'
import Router from 'vue-router'
import Layout from '@/pages/layout'//主框架

Vue.use(Router)

//需要左方向动画的路由用this.$router.toGo('***')
Router.prototype.toGo = function (path) {
  this.isLeft = true;
  this.isRight = false;
  this.push(path)
}

//需要右方向动画的路由用this.$router.goRight('***')
Router.prototype.goRight = function (path) {
  this.isLeft = false;
  this.isRight = true;
  this.push(path)
}

//需要返回按钮动画的路由用this.$router.goBack('***')
Router.prototype.goBack = function () {
  this.isLeft = false;
  this.isRight = true;
  this.go(-1)
}

//点击浏览器返回按钮执行，此时不需要路由回退
Router.prototype.toGoBack = function (path) {
  this.isLeft = false;
  this.isRight = true;
}

//点击浏览器前进按钮，此时不需要路由前进
Router.prototype.toGoIn = function (path) {
  this.isLeft = false;
  this.isRight = true;
}

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Layout',
      component: Layout,
      redirect:'/home',
      children: [
        {
          path: '/home',
          name:'首页',
          component:(resolve) => require(['@/pages/main/home'],resolve)
        },
        {
          path: '/product',
          name:'产品中心',
          component:(resolve) => require(['@/pages/main/product'],resolve)
        },
        {
          path: '/news',
          name:'新闻资讯',
          component:(resolve) => require(['@/pages/main/news'],resolve)
        },
        {
          path: '/cooperation',
          name:'渠道合作',
          component:(resolve) => require(['@/pages/main/cooperation'],resolve)
        },
        {
          path: '/join',
          name:'人才招聘',
          component:(resolve) => require(['@/pages/main/join'],resolve)
        },
        {
          path: '/about',
          name:'关于我们',
          component:(resolve) => require(['@/pages/main/about'],resolve)
        },
        {
          path: '/contact',
          name:'联系我们',
          component:(resolve) => require(['@/pages/main/contact'],resolve)
        },
        {
          path:'/news/newsdetail/:id',//动态路由，传值
          name:'新闻资讯',
          component:(resolve) => require(['@/pages/main/newsdetail'],resolve)
        },
        {
          path:'/product/productdetail/:id',//动态路由，传值
          name:'产品中心',
          component:(resolve) => require(['@/pages/main/productdetail'],resolve)
        }
      ]
    },
    {
      path:'/subpages/goodsdetail',
      name: '商品详情',
      component:(resolve) => require(['@/pages/subpages/goodsdetail'],resolve)
    }
  ]
})

接下来我们是看对应的页面了
layout页面

//layout.vue

这个公共头部的处理也挺有意思的

//CommonHeader

当然这个是公共footer的

//CommonFooter

接下来我们看home页面


功能点是轮播加跳转详情

//home.vue

product页面基本是纯静态的

//product

news页面有个分页

//news.vue

newsdetail页面

接下来是cooperation页面

//cooperation

接下来是join页面

//join.vue

about页面

//about

contact页面

//contact.vue