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]);
      })
}

注意： 当详情页可以由分享链接单独进入时，此方法会出问题，因为详情页路由还未注册。