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

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

原文地址:https://www.cnblogs.com/linjiangxian/p/12221201.html