一、前言

上一篇介绍了单一路由下的骨架屏插件实现。但在真实的产品中，其他页面也是要有各自的骨架屏的。

二、多路由骨架屏的原理

从上篇文章，可以知道骨架屏其实就是在js没有加载完成之前，在id为root的div里写一些动画代码，让用户不要看到一篇空白。

那多路由的骨架屏是怎样实现的呢？ 我们都知道，css有个display属性可以用来显示隐藏一些DOM节点。而javascript中window.location.pathname和window.location.hash可以获取到当前路由的名称和hash值，既然我们可以知道当前的路由情况，所以我们可以配合css的display属性，实现不同路由之间的骨架屏切换。

（1）编写不同路由的骨架屏代码

以下是3个路由的骨架屏代码，他们的display属性一开始都为none。

    
    
     
              我是默认的骨架屏    
     
    
     
              我是user的骨架屏    
     
    
     
              我是login的骨架屏    
     
    
复制代码

（2）编写js代码，用来控制上面骨架屏的显示隐藏

复制代码

（3）结合上一篇文章的骨架屏插件代码如下：

const HtmlWebpackPlugin = require('html-webpack-plugin');class SkeletonPlugin {  apply (compiler) {    compiler.hooks.compilation.tap('SkeletonPlugin', (compilation) => {      HtmlWebpackPlugin.getHooks(compilation).beforeEmit.tapAsync(        'SkeletonPlugin',        (htmlData, cb) => {          htmlData.html = htmlData.html.replace('
    
',`
    
          
     
                    我是默认的骨架屏          
     
          
     
                    我是user的骨架屏          
     
          
     
                    我是login的骨架屏          
     
        
    
        `);        cb(null, htmlData)      }    )  });  }}module.exports = SkeletonPlugin;复制代码

其实原理很简单，相信很多同学都可以明白。在这里我就不多说了。谢谢