1 import Vue from 'vue'
 2 import Router from 'vue-router'
 3
 4 Vue.use(Router);
 5 //按需加载,当渲染其他页面时才加载其组件,并缓存,减少首屏加载时间
 6 const Index = resolve => require(['@/views/Index.vue'], resolve)
 7 const Category = resolve => require(['@/views/Category.vue'], resolve)
 8 const CategoryMain = resolve => require(['@/components/category/main.vue'], resolve)
 9 const Car = resolve => require(['@/views/Car.vue'],resolve)
10 const User = resolve => require(['@/views/User.vue'], resolve)
11 const Detail = resolve => require(['@/views/Detail.vue'], resolve)
12 const Search = resolve => require(['@/views/Search.vue'], resolve)
13 const Pay = resolve => require(['@/components/car/pay/pay.vue'], resolve)
14 const Login = resolve => require(['@/views/login.vue'], resolve)
15
16
17 export default new Router({
18   routes: [{
19       path: '/',
20       name: '首页',
21       component: Index
22     }, {
23       path: '/category',
24       name: '分类页',
25       redirect: '/category/all',
26       component: Category,
27       children: [{
28         path: '/category/:tab',
29         component:CategoryMain
30       }]
31     }, {
32       path: '/car',
33       name: '购物车页',
34       component: Car
35     }, {
36       path: '/car/pay',
37       name: '支付页',
38       component: Pay
39     },
40     {
41       path: '/user',
42       name: '用户页',
43       component: User,
44       meta: {
45            requireAuth: true,  // 添加该字段,表示进入这个路由是需要登录才能进入的
46        },
47     }, {
48       path: '/detail',
49       name: '详情页',
50       component: Detail
51     }, {
52       path: '/search',
53       name: '搜索页',
54       component: Search
55     },{
56       path: '/login',
57       name: '登录页',
58       component: Login
59     }
60   ]
61 })

  1 import Vue from 'vue'
  2 import Router from 'vue-router'
  3
  4 // import Index from '@/components/index/index'
  5 // import Find from '@/components/find/find'
  6 // import Order from '@/components/order/order'
  7 // import Mine from '@/components/mine/mine'
  8 // import RestaurantDetail from '@/components/index/restaurant-detail/restaurant-detail'
  9 // import RestaurantList from '@/components/index/restaurant-list/restaurant-list'
 10 // import Goods from '@/components/index/restaurant-detail/goods/goods'
 11 // import Ratings from '@/components/index/restaurant-detail/ratings/ratings'
 12 // import Seller from '@/components/index/restaurant-detail/seller/seller'
 13 // import login from '@/components/login/login'
 14
 15 Vue.use(Router)
 16
 17 // 路由懒加载
 18 const Index = (resolve) => {
 19   import('@/components/index/index').then((module) => {
 20     resolve(module)
 21   })
 22 }
 23 const Find = (resolve) => {
 24   import('@/components/find/find').then((module) => {
 25     resolve(module)
 26   })
 27 }
 28 const Order = (resolve) => {
 29   import('@/components/order/order').then((module) => {
 30     resolve(module)
 31   })
 32 }
 33 const Mine = (resolve) => {
 34   import('@/components/mine/mine').then((module) => {
 35     resolve(module)
 36   })
 37 }
 38 const RestaurantDetail = (resolve) => {
 39   import('@/components/index/restaurant-detail/restaurant-detail').then((module) => {
 40     resolve(module)
 41   })
 42 }
 43 const RestaurantList = (resolve) => {
 44   import('@/components/index/restaurant-list/restaurant-list').then((module) => {
 45     resolve(module)
 46   })
 47 }
 48 const Goods = (resolve) => {
 49   import('@/components/index/restaurant-detail/goods/goods').then((module) => {
 50     resolve(module)
 51   })
 52 }
 53 const Ratings = (resolve) => {
 54   import('@/components/index/restaurant-detail/ratings/ratings').then((module) => {
 55     resolve(module)
 56   })
 57 }
 58 const Seller = (resolve) => {
 59   import('@/components/index/restaurant-detail/seller/seller').then((module) => {
 60     resolve(module)
 61   })
 62 }
 63 const login = (resolve) => {
 64   import('@/components/login/login').then((module) => {
 65     resolve(module)
 66   })
 67 }
 68
 69 export default new Router({
 70   routes: [
 71     // 根路径
 72     {
 73       path: '/',
 74       redirect: '/index',
 75       component: Index
 76     },
 77     // 首页
 78     {
 79       path: '/index',
 80       component: Index
 81     },
 82     // 登录
 83     {
 84       path: '/login',
 85       component: login
 86     },
 87     // 商家列表
 88     {
 89       path: '/restaurant_list',
 90       component: RestaurantList
 91     },
 92     // 商家模块
 93     {
 94       path: '/restaurant',
 95       redirect: '/restaurant/goods',
 96       component: RestaurantDetail,
 97       children: [
 98         {
 99           path: 'goods',
100           component: Goods
101         },
102         {
103           path: 'ratings',
104           component: Ratings
105         },
106         {
107           path: 'seller',
108           component: Seller
109         }
110       ]
111     },
112     // 发现
113     {
114       path: '/find',
115       component: Find
116     },
117     // 订单
118     {
119       path: '/order',
120       component: Order
121     },
122     // 我的
123     {
124       path: '/mine',
125       component: Mine
126     }
127   ]
128 })

转载于:https://www.cnblogs.com/yuwenjing0727/p/9327941.html

vue router按需加载相关推荐

  1. webpack和vue的按需加载组件、console、抓包

    1.webpack和vue的按需加载组件 webpack特有的懒加载文件的方式,很大的提升了webpack打包SPA应用的在性能方面. 而从webpack2以后require.ensure已经被imp ...

  2. vue 路由按需加载

    在vue项目中,一般引入组件都是用import import 组件名 from '组件路径' webpack在npm run build的时候会打包成一个整个的js文件,如果页面一多,会导致这个文件非 ...

  3. vue tree组件_Ant-Design-Vue和Icon按需加载方案 - JeecgBoot实战

    JeecgBoot实战 - 按需加载方案 一.Ant-Design-Vue 按需加载 1.创建js文件 src/components/lazy_antd.js import Vue from 'vue ...

  4. ant design pro取消登录_JeecgBoot实战按需加载 Ant-Design-Vue和Icon

    一.Ant-Design-Vue 按需加载 1.创建js文件 src/components/lazy_antd.js import Vue from 'vue'// base library impo ...

  5. Ant-Design-Vue和Icon按需加载方案 - JeecgBoot实战

    JeecgBoot实战 - 按需加载方案 文章目录 JeecgBoot实战 - 按需加载方案 一.Ant-Design-Vue 按需加载 二.Icon按需加载 一.Ant-Design-Vue 按需加 ...

  6. vue 按需加载,换存,导航守卫

    开发中的注意事项:代码性能的优化 1. 减少对第三方的依赖,降低耦合度 2. 加强组件的重复利用率 3. 按需加载 4. 缓存 (尽量发送请求后保存数据) 5. 开发过程中,尽量有着面向对象的思想,这 ...

  7. vue项目实现按需加载的3种方式

    vue异步组件技术 vue-router配置路由,使用vue的异步组件技术,可以实现按需加载.这种方式下一个组件生成一个js文件 用例: {path: '/promisedemo',name: 'Pr ...

  8. Vue根据菜单json数据动态按需加载路由Vue-router

    每个菜单项对应一个页面组件,根据菜单项动态按需加载路由 路由配置的正确写法: /*router/index.js*/ import Vue from 'vue' import Router from ...

  9. vue组件的按需加载

    一.require.ensure() require.ensuire(dependencies:String[],callback:function(require),errorCallback:fu ...

最新文章

  1. docker容器互联
  2. 呵呵,又在这里开了个博客,现在已经有好几个了
  3. 多线程:interrupted、isinterrupted区别
  4. 【Go学习笔记2】go语言中的基本数据类型和包的介绍(一)
  5. matdem矩阵维度必须一致_「数据仓库篇」Kimball维度建模方案
  6. 傻傻分不清之 Cookie、Session、Token、JWT这次让你彻底搞懂,还不懂你来找我
  7. MySQL 数据库管理之 --- SQL 语言进阶二
  8. 计算机字体库位置,win7电脑的字体库在哪里?
  9. c#样条曲线命令_C#绘制由点定义的贝塞尔样条曲线
  10. Java Mysql工具类封装
  11. 分享几款交互UI设计软件用法,了解后再选择
  12. 学会理解和更新kali软件源
  13. 【数据库】编写存储过程
  14. iOS快速清除全部的消息推送
  15. 把数据转化为JSON格式
  16. DebugView使用方法
  17. [KMP]zoj 3587:Marlon's String
  18. 分层数据流图简单介绍
  19. 如何在论文中添加参考文献引用(以Word2016为例)
  20. 属性和方法的区别是什么_痤疮和痘痘有什么区别?长痘痘之后3种护肤方法,痤疮3种治疗方式...

热门文章

  1. mysql函数快速查找
  2. 17.跟金根回顾敏捷个人:技术研究之道
  3. 解决linux服务器掉包问题
  4. 欧洲超高速网比宽带快万倍 几秒下载一部电影
  5. 前端技术周刊 2019-02-26:前端代码保护
  6. CentOS7.3下Jenkins+docker自动化部署solo站点
  7. 用原始方法解析复杂字符串,json一定要用JsonMapper么?
  8. ios AppStore 帐号申请
  9. !important------至高无上的宝剑
  10. linux根分区扩容(LVM动态卷)