Vue.js 搭配 Material Design Lite 时CSS/JS表现不一致问题

我之前也碰到过一模一样的情况！超链接跳过去之后，MDL的组件要么样式乱得离谱，要么文本框的交互完全用不了，手动输入网址或者刷新一下就正常了。这事儿大概率是MDL的组件初始化逻辑没跟上页面跳转的节奏，给你几个亲测有效的解决办法：

核心原因 #

MDL默认是在页面首次加载的DOMContentLoaded事件触发时，自动扫描并初始化所有带MDL类名的组件。但如果是通过超链接跳转（尤其是浏览器用了缓存预加载，或者是单页应用不刷新整个页面的路由跳转），新页面的DOM虽然加载了，但MDL并没有重新执行初始化流程，导致组件的样式和交互都没生效。

具体解决方案 #

• 手动触发MDL重新初始化
  不管是普通多页应用还是单页应用，在新页面的内容加载完成后，调用MDL的初始化方法就行：

  // 页面内容加载完成后执行这行代码
  componentHandler.upgradeAllRegistered();
  

  要是你用的是普通a标签跳转，可以在目标页面的window.onload或者DOMContentLoaded事件里再加一次这个方法，哪怕浏览器缓存了页面，也能强制重新初始化组件。

• 禁用浏览器页面缓存（多页应用专属）
  有些浏览器会对超链接跳转的页面启用缓存，导致MDL的初始化脚本没重新跑。你可以在页面头部加几个meta标签强制禁用缓存：

  <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
  <meta http-equiv="Pragma" content="no-cache">
  <meta http-equiv="Expires" content="0">
  

  这样浏览器每次跳转都会重新加载页面，MDL的初始化逻辑就能正常执行了。

• 路由切换时监听并初始化（单页应用专属）
  如果你是在单页应用里用MDL，比如自己写的原生路由或者用框架路由，那得在路由切换完成后手动调用初始化方法。比如原生JS监听路由变化：

  // 监听浏览器前进后退
  window.addEventListener('popstate', () => {
    // 路由切换后重新初始化所有MDL组件
    componentHandler.upgradeAllRegistered();
  });
  
  // 或者在你自己写的跳转函数里加
  function goToPage(url) {
    history.pushState({}, '', url);
    // 加载完新页面内容后执行
    componentHandler.upgradeAllRegistered();
  }
  

额外排查小技巧 #

• 先确认每个页面都正确引入了material.min.js，别只在首页加载一次就完事了；
• 检查跳转后的页面里，MDL的组件类名（比如mdl-textfield、mdl-button）有没有拼写错，类名不对MDL也识别不了。

内容的提问来源于stack exchange，提问作者smooth_smoothie