vue--异步组件

作者: 花拾superzay | 来源:发表于2020-01-09 15:21 被阅读0次

vue--异步组件
【Vue3 从入门到实战进阶式掌握完整知识体系】017-探索组
router - 2018-06-25
vue项目实现路由按需加载(路由懒加载)的3种方式
vue项目实现路由按需加载(路由懒加载)的3种方式
路由懒加载
Vue的异步组件
Vue2到Vue3的变化细节
2018-07-15 Vue源码解析阅读笔记
Vue--全局组件和局部组件

一个demo说明什么是异步组件，拷贝到本地运行查看效果

<!DOCTYPE html>
<html>

    <head>
        <title>异步组件</title>
        <meta http-equiv="content-type" content="text/html;charset=UTF-8">
    </head>

    <body>
        <div id='app'>
            <router-view></router-view>
        </div>

    </body> 
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

    <script>
        //异步组件定义
        function foo() {
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    resolve({ //组件对象
                        template: '<div>当前页面：小cccccccc</div>',
                        name: 'ccc',
                    })
                }, 5000)
            })

        }
        
        //配置路由
        let router = new VueRouter({
            mode: 'hash',
            routes: [{
                path: '/ccc',
                component: foo,

            }]
        });

        //执行vue
        let model = new Vue({
            el: "#app",
            data: {},
            created() {
                this.$router.push('/ccc');
            },
            router: router,
        });
    </script>

</html>