vue router按需加载
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按需加载相关推荐
- webpack和vue的按需加载组件、console、抓包
1.webpack和vue的按需加载组件 webpack特有的懒加载文件的方式,很大的提升了webpack打包SPA应用的在性能方面. 而从webpack2以后require.ensure已经被imp ...
- vue 路由按需加载
在vue项目中,一般引入组件都是用import import 组件名 from '组件路径' webpack在npm run build的时候会打包成一个整个的js文件,如果页面一多,会导致这个文件非 ...
- vue tree组件_Ant-Design-Vue和Icon按需加载方案 - JeecgBoot实战
JeecgBoot实战 - 按需加载方案 一.Ant-Design-Vue 按需加载 1.创建js文件 src/components/lazy_antd.js import Vue from 'vue ...
- 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 ...
- Ant-Design-Vue和Icon按需加载方案 - JeecgBoot实战
JeecgBoot实战 - 按需加载方案 文章目录 JeecgBoot实战 - 按需加载方案 一.Ant-Design-Vue 按需加载 二.Icon按需加载 一.Ant-Design-Vue 按需加 ...
- vue 按需加载,换存,导航守卫
开发中的注意事项:代码性能的优化 1. 减少对第三方的依赖,降低耦合度 2. 加强组件的重复利用率 3. 按需加载 4. 缓存 (尽量发送请求后保存数据) 5. 开发过程中,尽量有着面向对象的思想,这 ...
- vue项目实现按需加载的3种方式
vue异步组件技术 vue-router配置路由,使用vue的异步组件技术,可以实现按需加载.这种方式下一个组件生成一个js文件 用例: {path: '/promisedemo',name: 'Pr ...
- Vue根据菜单json数据动态按需加载路由Vue-router
每个菜单项对应一个页面组件,根据菜单项动态按需加载路由 路由配置的正确写法: /*router/index.js*/ import Vue from 'vue' import Router from ...
- vue组件的按需加载
一.require.ensure() require.ensuire(dependencies:String[],callback:function(require),errorCallback:fu ...
最新文章
- docker容器互联
- 呵呵,又在这里开了个博客,现在已经有好几个了
- 多线程:interrupted、isinterrupted区别
- 【Go学习笔记2】go语言中的基本数据类型和包的介绍(一)
- matdem矩阵维度必须一致_「数据仓库篇」Kimball维度建模方案
- 傻傻分不清之 Cookie、Session、Token、JWT这次让你彻底搞懂,还不懂你来找我
- MySQL 数据库管理之 --- SQL 语言进阶二
- 计算机字体库位置,win7电脑的字体库在哪里?
- c#样条曲线命令_C#绘制由点定义的贝塞尔样条曲线
- Java Mysql工具类封装
- 分享几款交互UI设计软件用法,了解后再选择
- 学会理解和更新kali软件源
- 【数据库】编写存储过程
- iOS快速清除全部的消息推送
- 把数据转化为JSON格式
- DebugView使用方法
- [KMP]zoj 3587:Marlon's String
- 分层数据流图简单介绍
- 如何在论文中添加参考文献引用(以Word2016为例)
- 属性和方法的区别是什么_痤疮和痘痘有什么区别?长痘痘之后3种护肤方法,痤疮3种治疗方式...