vue——router.js動態注冊組件

參考：http://www.pianshen.com/article/6692170109/

 

我的需求：列表頁進詳情頁，在列表頁加載完成時，注冊詳情頁。這樣首次進入詳情頁時就會更快（因為提前引入了詳情頁的js），同時也不會影響進入列表頁時的速度。

 

列表頁js：

mounted() {
      ****  // 其他業務
      let _this = this;  
      import('./Detail.vue').then(module => {  //注意導入位置
        let route = {
          path: '/detail',
          name: 'Detail',
          meta: {
            index: 2,
            keepAlive: false,
            title: '詳情頁'
          },
          component: resolve => require(['./Detail'], resolve) //導入時根據組件位置調整，找不到的話vue會報錯: Cannot create property '_Ctor' on string 'Detail'
        }
        _this.$router.options.routes.push(route);
        _this.$router.addRoutes([route]);
      })
}

注意： 當詳情頁可以由分享鏈接單獨進入時，此方法會出問題，因為詳情頁路由還未注冊。