折磨人的vue嵌套页面-懒加载(根据路径不同dialog加载不同的页面)

1.编写dialog

<el-dialog
  title="懒加载"
  :visible.sync="dialogVisible"
  width="30%"
  :before-close="handleClose">
      
    <testPage v-if="testPage_show"></testPage>

    <el-button @click="closeDialog()">取 消</el-button>

</el-dialog>

<script>
import testPage from '文件路径'
  export default {
    components:{testPage },
    data() {
      return {
        dialogVisible: false,
        testPage_show : false
      };
    },
    methods: {
      handleClose(done) {
        done();
        this.testPage_show = false;
      },
       closeDialog(){
        this.dialogVisible = false;   
        this.testPage_show = false;     
}
    }
  };
</script>

2.注意：

1）引入的页面一定要在components中引用，不然无法使用 <testPage></tetsPage>

2) vue 懒加载通过 v-if 所以每次关闭dialog页面都要 v-lf="false" 否则下一次打开页面数据可能是未更新的数据