vue实现按需加载的两种方式

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

// 下面2行代码,没有指定webpackChunkName,每个组件打包成一个js文件。
const ImportFuncDemo1 = () => import('../components/ImportFuncDemo1')
const ImportFuncDemo2 = () => import('../components/ImportFuncDemo2')

// 下面2行代码,指定了相同的webpackChunkName,会合并打包成一个js文件。
// const ImportFuncDemo1 = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '../components/ImportFuncDemo1')
// const ImportFuncDemo2 = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '../components/ImportFuncDemo2')

// scrollBehavior:
// - only available in html5 history mode
// - defaults to no scroll behavior
// - return false to prevent scroll
const scrollBehavior = (to, from, savedPosition) => {
    if (savedPosition) {
        // savedPosition is only available for popstate navigations.
        return savedPosition
    } else {
        const position = {}
        // new navigation.
        // scroll to anchor by returning the selector
        if (to.hash) {
            position.selector = to.hash
        }
        // check if any matched route config has meta that requires scrolling to top
        if (to.matched.some(m => m.meta.scrollToTop)) {
            // cords will be used if no selector is provided,
            // or if the selector didn't match any element.
            position.x = 0
            position.y = 0
        }
        // if the returned position is falsy or an empty object,
        // will retain current scroll position.
        return position
    }
}

export default new Router({
    mode: 'history',
    scrollBehavior,
    routes: [
        {
            path: '/',
            name: 'StoreDemo',
            // 使用vue的[异步组件](https://cn.vuejs.org/v2/guide/components.html#异步组件)技术,可以实现按需加载
            // 但是,这种情况下一个组件生成一个js文件
            component: resolve => require(['../components/StoreDemo'], resolve),
            // 配置了scrollToTop为true,点击这个路由,页面会滚到顶部
            // 如果没配置scrollToTop或配置scrollToTop为false,点击这个路由,页面保持原先的滚动位置
            // 效果说明:点击这个路由后,滚动页面隐藏顶部的一部分,再点击路由:/promisedemo,页面保持原先的滚动位置;再点击这个路由,页面会滚动到顶部,因为配置了scrollToTop为true
            meta: { scrollToTop: true }
        },
        {
            path: '/promisedemo',
            name: 'PromiseDemo',
            // 使用webpack的[require.ensure](https://doc.webpack-china.org/api/module-methods#require-ensure)技术,也可以实现按需加载。
            // 这种情况下,多个路由指定相同的chunkName,会合并打包成一个js文件;如果不指定chunkName,则和使用vue的异步组件一样,每个组件生产打包成一个js文件。
            // 这个组件PromiseDemo 和下面的 Hello 组件,指定了相同的chunkName(名字为:demo),因此会合并打包成一个js文件。
            component: resolve => require.ensure([], () => resolve(require('../components/PromiseDemo')), 'demo')
        },
        {
            path: '/hello',
            name: 'Hello',
            component: resolve => require.ensure([], () => resolve(require('../components/Hello')), 'demo')
        },
        {
            path: '/importfuncdemo1',
            name: 'ImportFuncDemo1',
            component: ImportFuncDemo1
        },
        {
            path: '/importfuncdemo2',
            name: 'ImportFuncDemo2',
            component: ImportFuncDemo2
        },
        {
            path: '/pluginsdemo',
            name: 'PluginsDemo',
            component: resolve => require.ensure([], () => resolve(require('../components/PluginsDemo')), 'PluginsDemo')
        }
    ]
})

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值