为什么VUE的路由切换组件的时候css不销毁不是按需加载

Question

为什么我的页面的css会被全被加载出来 我给style scoped加了这个属性还是全部加载出来 这是什么原因
现在所有的样式全部共用怎么才能解决掉啊
这个不是应该按需加载吗 需要的加载不需要的不就是销毁了吗

Answer 1

你这里不但没有按需加载，而且css还是内联在html文件里，没有提取出来。
目测你是vue+webpack开发。
你应该使用extract-text-webpack-plugin这个插件来把你的vue里的css提取出来成单独文件。
new ExtractTextPlugin('css/[name].[contenthash:8].css')
但如果你使用vue-cli这应该是已经配置好了的，你可能是在开发模式中，所以没有提取出来，如果打包后可能就会提取出来。
此外，你如果要按需加载，你也要先做到组件按需加载，
如果是在webpack里就是这么写

router.map({
  '/async': {
    component: function (resolve) {
      require(['./MyComponent.vue'], resolve)
    }
  }
})

详见：http://router.vuejs.org/zh-cn...
同时，你的ExtractTextPlugin

new ExtractTextPlugin('css/[name].[contenthash:8].css', {
    allChuck: true
})

Answer 2

加scoped不是解决css加载的问题的，是防止css重名。。
要是没有设置按需加载的话 css和js是一次加载到页面的