vue 项目问题总结

1.替换数据中指定key 值，例如将cityJson中"rid"=>"label","name"=>"value", "child"=>"children",
let cityJson = [{
"rid": "11",
"name": "北京",
"child": [{
"rid": "1101",
"name": "北京",
"child": [{
"rid": "110101",
"name": "东城区"}]
}]
}]

方法一：直接使用 eval() 方法，前端编译工具报错
let city = JSON.stringify(cityJson)
.replace(/"rid"/g, "value")
.replace(/"name"/g, "label")
.replace(/"child"/g, "children");
this.cityData = this.eval(city);
解决：eval(fn) {
let Fn = Function; // 一个变量指向Function，防止有些前端编译工具报错
return new Fn(fn)();
}
方法一：map嵌套循环
this.cityData = cityJson.map((item) => {
return {
value: item.rid,
label: item.name,
children: item.child.map((ite) => {
return {
value: ite.rid,
label: ite.name,
children: Array.isArray(ite.child)
? ite.child.map((it) => {
return {
value: it.rid,
label: it.name,
};
})
: "",
};
}),
};
});
2.vue keepAlive不生效
在App.vue页面写keepAlive没有效果，然后又试了下include也是没有效果。
原因是项目中有多个router-view，把keepAlive写在最里面的router-view外就可以了
一、利用meta标签
1、首先在路由中的meta标签中记录keepAlive的属性为true
2、在需要缓存的router-view组件上包裹keep-alive组件　　




3、有些情况下需要缓存有些情况下不需要缓存，可以在缓存的组件里的路由钩子函数中做判断　　
beforeRouteLeave (to, from, next) {
this.loading = true
if (to.path === '/goods_detail') {
from.meta.keepAlive = true
} else {
from.meta.keepAlive = false
// this.$destroy()
}
next()
},
二、使用include、exclude属性和beforeRouteEnter钩子函数
要在组件里面 写对应的 name: "home", 首先检查组件自身的 name 选项，如果 name 选项不可用，则匹配它的局部注册名称 (父组件 components 选项的键值)。匿名组件不能被匹配。



三、使用Swiper插件遇到的滑动冲突问题，手机端浏览不能滑动页面
new Swiper('.swiper', {
autoplay: true,//可选选项，自动滑动
loop : true,
direction : 'vertical',
})