- [新增] 了解异步组件, 使用异步组件进行组件的拆分

montage-f · Sep 30, 2019 · 29fdc03 · 29fdc03
1 parent bd1ffb1
commit 29fdc03
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 4 deletions.
diff --git a/src/router/index.js b/src/router/index.js
@@ -2,7 +2,6 @@ import Vue from 'vue';
 import Router from 'vue-router';
 import Home from '@/views/Home/';
 import City from '@/views/City';
-import Detail from '@/views/Detail';
 
 Vue.use(Router);
 
@@ -21,7 +20,8 @@ export default new Router({
         }, {
             path: '/detail/:id',
             name: 'Detail',
-            component: Detail,
+            // 当整个文件过大的时候, 我们可以采用异步组件, 进行代码的拆分
+            component: () => import('@/views/Detail'),
         },
     ],
     scrollBehavior() {

diff --git a/src/views/Detail/components/Banner.vue b/src/views/Detail/components/Banner.vue
@@ -29,13 +29,13 @@
 </template>
 
 <script>
-    import Gallery from '@/components/common/Gallery';
     import FadeAnimation from '@/components/common/Fade';
 
     export default {
         name: 'Banner',
         components: {
-            Gallery,
+            // 组件内部也可以使用了异步组件
+            Gallery: () => import('@/components/common/Gallery'),
             FadeAnimation,
         },
         data() {