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

html-css09

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

目测你是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

})

可能是因为浏览器缓存了样式文件导致。

可以在css文件引用的末尾随便加个请求参数,如:main.css?v=201804091834,浏览器就以为是个新文件,然后从服务器重新下载该文件。

实现思想:路由相同时css不变,用了this.$route.query

参考demo <template>部分:

script部分: