vue采坑实记
1. fastClick的300ms延迟问题
解决方法:
安装fastClick: sudo npm install fastclick -s
在main.js中引入并初始化:
import FastClick from 'fastClick';
FastClick.attach(document.body);
2. 深度选择器
这个知识点别的文章有写过,不过我还是贴一下自己的代码,记录一下~
我们在开发vue项目的时候,样式都是写在标签中,加scoped是为了让样式只在当前页面有效。如果我们想修改组件的样式,问题就来了,如图,编译的时候会自动加上[data-v-3f35971a]属性,但是第三方组件内部的标签并没有编译为附带[data-v-3f35971a]的属性,那我们修改的时候怎么办呢?
解决方法:深度选择器。例如图中的代码,我们可以这么写,我们加个颜色看下效果:
.new-content /deep/ .new-first-txt{font-size:15px;margin-bottom:1.2rem;line-height:1.8rem;color:#ff0000;}
编译后结果为:
.new-content[data-v-3f35971a] .new-first-txt{font-size:15px;margin-bottom:1.2rem;line-height:1.8rem}
展示效果:
这样就不会给new-first-txt添加[data-v-3f35971a]属性了。
总结下代码:
<style scoped> .a >>> .b { /* code*/} </style>
编译为:
.a[data-v-3f35971a] .b{ /* code*/ }
有些像sass之类的预处理器无法正确解析>>>的,可以用/deep/
3. 如何打包的时候不生成.map文件
解决方法:
在config/index.js文件中,设置 productionSourceMap:false
就可以不生成.map文件了
下面让我们来试一下,首先上代码:
看一下修改前后对比图:
4. 路由传参的使用
首先介绍下两种路由传参方式,我先上个图,简单介绍下,然后说下我遇到过的问题:
第一种是params方式
第二种是query方式
然后说下使用params传参过程中遇到的问题:
const routes = [{
path: '/index/:id',
component:home,
meta:{ keepAlive:false}
},
{
path: '/index/404',
component: none,
meta:{ keepAlive:false}
}]
这样写的问题就是,两个链接都会跳到首页,404页面根本访问不到,简单点的解决方法,就是把404的path改成不是两级的结构。
params结构是/index/:id,如果在后面加参数/index/:id?lat=39.786506&lng=116.563286&storeId=001,这种形式的传参,页面跳转时?后面的参数会丢失。
如有问题,请给我留言