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，这种形式的传参，页面跳转时？后面的参数会丢失。

如有问题，请给我留言