vue 懒加载 css样式不会覆盖_干货分享 | Vue框架常见问题浅谈

友情提示：全文7800多文字，预计阅读时间10分钟

Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。使用其进行前后端分离开发前端业务平台，不断摸索踩坑之后，总结出如下几点Vue项目开发中常见的问题及解决办法，希望与君共同探讨。

• 列表进入详情页的传参问题

• 本地开发环境请求服务器接口跨域的问题

• axios封装和api接口的统一管理

• UI库的按需加载

• 如何优雅的只在当前页面中覆盖ui库中组件的样式

• 定时器问题

• rem文件的导入问题

• Vue-Awesome-Swiper基本能解决你所有的轮播需求

• 打包后生成很大的.map文件的问题

• fastClick的300ms延迟解决方案

• 组件中写选项的顺序

• 路由懒加载(也叫延迟加载)

• 开启gzip压缩代码

• 详情页返回列表页缓存数据和浏览位置、其他页面进入列表页刷新数据的实践

• css的scoped私有作用域和深度选择器

• hiper打开速度测试

• 路由的拆分管理

• 可选链操作符

• 利用闭包构造map缓存数据

列表进入详情页的传参问题

例如租户列表页面前往租户详情页面，需要传一个租户id;

页面的路径为http://localhost:8080/#/detail?code=1，可以看到传了一个参数code=1，并且就算刷新页面id也还会存在。此时在页面可以通过code来获取对应的详情数据，获取code的方式是this.$route.query.code

vue传参方式有：query、params+动态路由传参。

说下两者的区别：

1、query通过path切换路由，params通过name切换路由

2、query通过this.$route.query来接收参数，params通过this.$route.params来接收参数。

3、query传参的url展现方式：

/detail?code=1&user=123&identity=1&更多参数

params＋动态路由的url方式：/detail/123

4、params动态路由传参，一定要在路由中定义参数，然后在路由跳转的时候必须要加上参数，否则就是空白页面：

注意，params传参时，如果没有在路由中定义参数，也是可以传过去的，同时也能接收到，但是一旦刷新页面，这个参数就不存在了。这对于需要依赖参数进行某些操作的行为是行不通的，因为你总不可能要求用户不能刷新页面吧。例如：

本地开发环境请求服务器接口跨域的问题

上面的这个报错大家都不会陌生，报错是说没有访问权限(跨域问题)。本地开发项目请求服务器接口的时候，因为客户端的同源策略，导致了跨域的问题。

下面先演示一个没有配置允许本地跨域的的情况：

可以看到，此时我们点击获取数据，浏览器提示我们跨域了。所以我们访问不到数据。

那么接下来我们演示设置允许跨域后的数据获取情况：

注意：配置好后一定要关闭原来的server，重新npm run dev启动项目。不然无效。

我们在1处设置了允许本地跨域，在2处，要注意我们访问接口时，写的是/api，此处的/api指代的就是我们要请求的接口域名。如果我们不想每次接口都带上/api，可以更改axios的默认配置axios.defaults.baseURL = '/api';

这样，我们请求接口就可以直接this.$axios.get('app.php?m=App&c=Index&a=index')，很简单有木有。此时如果你在network中查看xhr请求，你会发现显示的是localhost:8080/api的请求地址。这样没什么大惊小怪的，代理而已：