• 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 })
  • 相关阅读:
    SAP基础:定位点运算
    WDA基础十七:ALV不同行显示不同下拉
    WDA基础十六:ALV的颜色
    WEB UI基础八:链接跳转到标准的工单界面
    WDA基础十五:POPUP WINDOW
    CRM创建BP(END USER)
    CRM 员工创建并分配用户
    STRANS一:简单的XML转换
    WEB UI 上传URL附件(使用方法备份)
    FPM四:用OVP做查询跳转到明细
  • 原文地址:https://www.cnblogs.com/yuwenjing0727/p/9327941.html
Copyright © 2020-2023  润新知