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

html-css042

为什么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

})

根据你的描述设置Body背景图片无效为路径问题。

解决办法:

修改路径:

background-image:url(../images/image2.jpg) //或者可以使用代码,其中可以添加宽度、高度、平铺、拉伸等: background:url(../images/image2.jpg)

css.css相对于images中image2.jpg在上一个目录中。前面为../imges/image2.jpg。

background:url与background-image:url区别在于,前者的属性范畴更大,附属参数和值是想效果更多。后者只正对于背景图。

注意事项:

A、相对路径与绝对路径在实际使用中各有优劣。

B、相对路径在使用时必须注意目录结构。

C、编程中所有代码间均为英文状态下的标点符号。

D、在使用时background:url()对浏览器的兼容性优于background-image:url()。