Vue系列-import动态引入的坑

最近在开发个人博客，点击文章列表显示相应md文章，效果如下：

其中遇到一个坑，我通过在后端请求md文件的path，从而在前端展示markdown文件，具体代码如下：

<!--前端展示md文章-->
<vue-markdown :key="key">{{msg}}</vue-markdown>

      async getMd(){
        //通过id获取md文件的path
        await getArticleById(this.$route.params.id).then(res=>{
          this.arName=res.name
        })
      
      	//动态引入md文章,坑在下面这句！！！！！！
        await import(this.arName).then(myModule => {
          this.msg=  myModule.default;
        });
        //强制重新渲染
        this.key += 1 
     },

编译的结果显示如下：

 WARNING  Compiled with 1 warnings                                                                                               09:01:31

 warning  in ./src/views/Article.vue?vue&type=script&lang=js&

Critical dependency: the request of a dependency is an expression

最后也得不到我要的效果，根据网友的提示，在官方文档发现有一个黄条提示

这个现象其实是与webpack import()的实现高度相关的。由于webpack需要将所有import()的模块都进行单独打包，所以在工程打包阶段，webpack会进行依赖收集。，webpack会找到所有import()的调用，将传入的参数处理成一个正则，如：

import('./app'+path+'/util') => /^./app.*/util$/

也就是说，import参数中的所有变量，都会被替换为【.*】，而webpack就根据这个正则，查找所有符合条件的包，将其作为package进行打包。如果我们直接传入一个变量，webpack就会把 (整个电脑的包都打包进来[不闹]) 认为你在逗他，并且抛出一个WARNING: Critical dependency: the request of a dependency is an expression。
所以import的正确姿势，应该是尽可能静态化表达包所处的路径，最小化变量控制的区域。
如我们要引用一堆页面组件，可以使用import(’./pages/’+ComponentName)，这样就可以实现引用的封装，同时也避免打包多余的内容。于是果断将我的代码进行了修改

于是得到想要的结果，原来import（）动态加载的时候要注意这么多，下次要注意了。
为了点击直接显示文章，应对$route做监听，具体的应用，见https://blog.csdn.net/ws6afa88/article/details/108652794，监听方式如下：

 watch:{
    //监听路由变化,路由变化由点击<router-link>造成
    $route(to,from){
      //显示markdown文件函数
      this.getMd();
    }
  }

这里作一个笔记，也希望其它遇到此问题的网友能够及时修正。