vue引用本地图片地址遍历无法被浏览器编译解析的问题

前言：由于工作原因，一直没有时间更博，今天就写一下用vue的时候踩过的一些坑

在做项目的过程中，让我印象最深刻的问题有两个：

（1）在同一个页面上重复使用同一个组件的时候，数据源污染，在第二个数据加载的时候把第一个数据源给冲突了的情况

这个问题当时整整搞了两个小时，后来才想到，对象作用域隔离的问题，也就是scope,怎么说呢？也就是你想在同一个页面重复使用同一个组件的时候，那你样式肯定是不一样的，这时候你就在可以在当前页面下的样式里加入scope,实现作用域隔离。

（2）为什么用import引入图片无效，用require就可以呢？其实这就要讲到import和require的区别了,虽然他们两个遵守的规范是不一样的，但是从本质上来讲，其实两者都可以使用引入，但是在解析的时候内部是不一样的,require是运行时调用，import是编译时调用

本质

• require是赋值过程，其实require的结果就是对象、数字、字符串、函数等，再把require的结果赋值给某个变量
• import是解构过程，但是目前所有的引擎都还没有实现import，我们在node中使用babel支持ES6，也仅仅是将ES6转码为ES5再执行，import语法会被转码为require

（3）为什么发请求的时候会出现option预请求？其实这是跨域造成的，因为我们在项目中没有设置跨域就直接用axios发起请求。那说这么多，其实Preflighted Requests是CORS中一种透明服务器验证机制。预检请求首先需要向另外一个域名的资源发送一个 HTTP OPTIONS 请求头，其目的就是为了判断实际发送的请求是否是安全的。解决这个问题的实际方法是直接到我们的config-index.js配置文件下设置我们的proxytable代理地址即可。

（4）我们页面中经常会用到缓存，那其实我们都知道vue中用keep-alive做我们的页面缓存是存在很多坑的，比如在keep-alive中的在跳转到指定的路由时刷新对应的路由，其余不刷新。这个问题就是我们的keep-alive缓存搞的鬼，那解决这个问题其实也很简单。

有几种解决方式

1.在keep-alive中直接添加 include，cachedViews（Array类型：包含vue文件的组件name都将被缓存起来）；反之exclude则是不包含；

　　注意：所有.vue组件文件都必须附上name属性！！！建议用vuex管理cachedViews

1 2 3

<keep-alive :include="cachedViews">       <router-view></router-view> </keep-alive>

　　2.监测$router的变化；

1 2 3 4

watch: {     // 如果路由有变化，会再次执行该方法    "$route": "fetchDate" }

　　但是会在页面离开时再次执行fetchDate，并不是我们需要的，所以可以在to和from上添加执行逻辑，但也是十分的麻烦

1 2 3 4 5 6 7 8

//$router是只读状态，所以赋值操作会失效 watch: {     $route (to, from) {         if（list.indexOf(from.path) > -1）{ //自行添加逻辑，list为你不想有缓存的路径 　　　　　　　　this.getData()         }   　　} }

　　3.在添加keep-alive后会增加两个生命周期mounted>activated、离开时执行deactivated，路由的进入和切换回相应的触发activated和deactivated，这样就可以在每次入路由执行更细致的操作了

1 2 3 4 5

//如果是服务端渲染就算了 activated() {     //只刷新数据，不改变整体的缓存     this.fetchDate();  }

　　4.还有更简单粗暴的

1 2 3 4 5 6

//我就笑笑不说话<br><div>     <keep-alive>         <router-view v-if="$route.meta.keepAlive"></router-view>     </keep-alive>     <router-view v-if="!$route.meta.keepAlive"></router-view> </div>

　　5.还有种情况，在不同路由应用了相同的vue组件

1 2	{path:'aaa',component:Mompage,name:'mom'}, {path:'bbb',component:Mompage,name:'momPlus'}

　　默认情况下当这两个页面切换时并不会触发vue的created或者mounted钩子，需要手动的watch:$router（又回到上面的步骤），或者在router-view上加上唯一值。

1 2 3 4 5 6 7

//随便抄一段代码过来 <router-view :key="key"></router-view> computed: {     key() {         return this.$route.name !== undefined? this.$route.name + +new Date(): this.$route + +new Date()     }  }

　　有错误的，请指出