材料设计使用材料设计与vue-router因果关系失败？

Question

下面是我的App.vue代码：

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
import 'material-design-lite'
export default {
  name: 'app'
}
</script>

<style lang="stylus">
@import url('./assets/css/material-icons.css');
@import url('./assets/css/material.indigo-blue.min.css');
</style>

我在我的vue.js项目中使用Material-design-lite包。

我也使用vue-router

在我运行npm run dev之后，第一个页面的效果很好，但是当我用vue-router更改url时，基本的css样式仍然有效，但是动画效果失败了。

但我新鲜的网站，动画效果很好。

我知道import 'material-design-lite'附带了动画效果。

那么，怎样才能让所有的页面都做好动画效果呢？

Answer 1

您需要重新运行mdl componentHandler，因为vue模板在运行时尚未挂载。我使用组件“扩展”在我拥有的每个组件上使用这个技巧。参见Using material design with VueJS。

<script>
    export default {
      name: 'Page',
      mounted: function () {
        // eslint-disable-next-line
        componentHandler.upgradeDom()
        // eslint-disable-next-line
        componentHandler.upgradeAllRegistered()
      }
    }
</script>
//another component
<script>
export default {
    name: 'anotherComponent',
    extends: PageBase,
    ...
}
</script>