在好例子网,分享、交流、成长!
您当前所在位置:首页js 开发实例常用JavaScript方法 → vue+mui商城实例

vue+mui商城实例

常用JavaScript方法

下载此实例
  • 开发语言:js
  • 实例大小:55.46M
  • 下载次数:595
  • 浏览次数:8547
  • 发布时间:2018-07-02
  • 实例类别:常用JavaScript方法
  • 发 布 人:joygaoxing
  • 文件格式:.zip
  • 所需积分:2
 相关标签: 实例 UI 商城 mui vue

实例介绍

【实例简介】基于mui vue2.x的H5 APP项目,页面视图全部都是html5页,不是嵌入app原生页面,项目可以直接运行在PC上调试,也可以在hbuilder上真机调试

【实例截图】

【核心代码】

import Vue from 'vue'
import Router from 'vue-router'
import store from '../store'

// import Index from '@/components/index/index'
// import Find from '@/components/find/find'
// import Order from '@/components/order/order'
// import Mine from '@/components/mine/mine'
// import RestaurantDetail from '@/components/index/restaurant-detail/restaurant-detail'
// import RestaurantList from '@/components/index/restaurant-list/restaurant-list'
// import Goods from '@/components/index/restaurant-detail/goods/goods'
// import Ratings from '@/components/index/restaurant-detail/ratings/ratings'
// import Seller from '@/components/index/restaurant-detail/seller/seller'
// import login from '@/components/login/login'

Vue.use(Router)

// 路由懒加载
const Index = (resolve) => {
  import('@/components/index/index').then((module) => {
    resolve(module)
  })
}
const Find = (resolve) => {
  import('@/components/find/find').then((module) => {
    resolve(module)
  })
}
const Order = (resolve) => {
  import('@/components/order/order').then((module) => {
    resolve(module)
  })
}
const Mine = (resolve) => {
  import('@/components/mine/mine').then((module) => {
    resolve(module)
  })
}
const RestaurantDetail = (resolve) => {
  import('@/components/index/restaurant-detail/restaurant-detail').then((module) => {
    resolve(module)
  })
}
const RestaurantList = (resolve) => {
  import('@/components/index/restaurant-list/restaurant-list').then((module) => {
    resolve(module)
  })
}
const Goods = (resolve) => {
  import('@/components/index/restaurant-detail/goods/goods').then((module) => {
    resolve(module)
  })
}
const Ratings = (resolve) => {
  import('@/components/index/restaurant-detail/ratings/ratings').then((module) => {
    resolve(module)
  })
}
const Seller = (resolve) => {
  import('@/components/index/restaurant-detail/seller/seller').then((module) => {
    resolve(module)
  })
}
const login = (resolve) => {
  import('@/components/login/login').then((module) => {
    resolve(module)
  })
}
const Home = (resolve) => {
  import('@/components/home/home').then((module) => {
    resolve(module)
  })
}
const Maps = (resolve) => {
  import('@/components/maps/maps').then((module) => {
    resolve(module)
  })
}
const Guide = (resolve) => {
  import('@/components/guide/guide').then((module) => {
    resolve(module)
  })
}
const About = (resolve) => {
	import('@/components/about/about').then((module) => {
		resolve(module)
	})
}

const router = new Router({
  routes: [
    // 根路径
    {
      path: '/',
      redirect: '/home',
      component: Home,
      meta:{title:'首页',isShowHead:false,isShowFoot:true}
    },
    // 首页
    {
      path: '/home',
      component: Home,
      meta:{title:'首页',isShowHead:false,isShowFoot:true}
    },
    // 登录
    {
      path: '/login/',
      component: login,
      meta:{title:'登录注册',isShowHead:true,isShowFoot:false}
    },
    // 商家列表
    {
      path: '/restaurant_list/',
      component: RestaurantList,
      meta:{title:'商家列表',isShowHead:true,isShowFoot:false,isShowBack:true}
    },
    // 商家模块
    {
      path: '/restaurant',
      redirect: '/restaurant/goods',
      component: RestaurantDetail,
      children: [
        {
          path: 'goods',
          component: Goods,
          meta:{title:'商家详情',isShowHead:false,isShowFoot:false,isShowBack:true}
        },
        {
          path: 'ratings',
          component: Ratings
        },
        {
          path: 'seller',
          component: Seller
        }
      ]
    },
    // 发现
    {
      path: '/find',
      component: Find,
      meta:{title:'优惠劵',isShowHead:true,isShowFoot:true,isShowBack:false}
    },
    // 订单
    {
      path: '/order',
      component: Order
    },
    // 我的
    {
      path: '/mine',
      component: Mine,
      meta:{title:'我的',isShowHead:true,isShowFoot:true,isShowBack:true}
    },
    {
      path: '/index',
      component: Index,
   		meta:{title:'会员',isShowHead:false,isShowFoot:true,isShowBack:false}
    },
    {
      path: '/maps/',
      component: Maps,
   		meta:{title:'我的足迹',isShowHead:true,isShowFoot:false,isShowBack:true}
    },
    {
      path: '/guide',
      component: Guide,
   		meta:{title:'引导页',isShowHead:false,isShowFoot:false,isShowBack:false}
    },{
    	path:'/about/',
    	component: About,
    	meta:{title:'关于',isShowHead:true,isShowFoot:false,isShowBack:true}
    }
  ]
})
	router.afterEach(function(to,from){
		console.log(to.meta.title,to.meta.isShowBack)
		var toL = to.path.split('/').length;
		var fromL = from.path.split('/').length;
		var trans;
		if(toL == fromL){
			trans = 'fade'
		}else{
			trans = toL>fromL?'next':'prev'
		}
		if(to.meta.title){
			store.dispatch("updateNavbarTitle", to.meta.title);
			//过渡效果
			store.dispatch('updateTransition',trans)
			store.dispatch('updateNavbarStatus',{isShowHead:to.meta.isShowHead,isShowFoot:to.meta.isShowFoot,isShowBack:to.meta.isShowBack})			
			document.title = "加时代-"   to.meta.title || "";
		}		
	})
	export default router

标签: 实例 UI 商城 mui vue

实例下载地址

vue+mui商城实例

不能下载?内容有错? 点击这里报错 + 投诉 + 提问

好例子网口号:伸出你的我的手 — 分享

网友评论

第 1 楼 安林娜 发表于: 2018-11-13 19:58 25
请问作者是哪位

支持(0) 盖楼(回复)

第 2 楼 lwx921124 发表于: 2018-11-28 18:05 18
不能下载

支持(0) 盖楼(回复)

第 3 楼 柠檬兔 发表于: 2019-05-16 11:25 01
少文件吗,不能运行

支持(0) 盖楼(回复)

第 4 楼 326565164 发表于: 2019-11-01 14:13 36
骗人的

xl1988 2018-09-16 10:22 42

早看到你的回复我就不下载了,果然不能运行

支持(0) 盖楼(回复)

第 5 楼 Mr.贾 发表于: 2021-03-31 17:37 41
空空如也

支持(0) 盖楼(回复)

发表评论

(您的评论需要经过审核才能显示)

查看所有9条评论>>

小贴士

感谢您为本站写下的评论,您的评论对其它用户来说具有重要的参考价值,所以请认真填写。

  • 类似“顶”、“沙发”之类没有营养的文字,对勤劳贡献的楼主来说是令人沮丧的反馈信息。
  • 相信您也不想看到一排文字/表情墙,所以请不要反馈意义不大的重复字符,也请尽量不要纯表情的回复。
  • 提问之前请再仔细看一遍楼主的说明,或许是您遗漏了。
  • 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦,又没人会搭理,于人于己都无利。

关于好例子网

本站旨在为广大IT学习爱好者提供一个非营利性互相学习交流分享平台。本站所有资源都可以被免费获取学习研究。本站资源来自网友分享,对搜索内容的合法性不具有预见性、识别性、控制性,仅供学习研究,请务必在下载后24小时内给予删除,不得用于其他任何用途,否则后果自负。基于互联网的特殊性,平台无法对用户传输的作品、信息、内容的权属或合法性、安全性、合规性、真实性、科学性、完整权、有效性等进行实质审查;无论平台是否已进行审查,用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。本站所有资源不代表本站的观点或立场,基于网友分享,根据中国法律《信息网络传播权保护条例》第二十二与二十三条之规定,若资源存在侵权或相关问题请联系本站客服人员,点此联系我们。关于更多版权及免责申明参见 版权及免责申明

;
报警