尚品汇项目难点及解决

v-router重写push、replace方法

问题描述：当页面再次进入同一个路由地址时，控制台报错

解决方法：修改vue-router的配置文件，也就是router/index.js文件

//重写VueRouter.prototype身上的push方法了
VueRouter.prototype.push = function(location, resolve, reject) {//第一个形参：路由跳转的配置对象（query|params）//第二个参数：undefined|箭头函数（成功的回调）//第三个参数:undefined|箭头函数（失败的回调）if (resolve && reject) {//push方法传递第二个参数|第三个参数（箭头函数）//originPush：利用call修改上下文，变为(路由组件.$router)这个对象，第二参数：配置对象、第三、第四个参数：成功和失败回调函数originPush.call(this, location, resolve, reject);} else {//push方法没有产地第二个参数|第三个参数originPush.call(this,location,() => {},() => {});}
};

//重写VueRouter.prototype身上的replace方法了
VueRouter.prototype.replace = function(location, resolve, reject) {if (resolve && reject) {originReplace.call(this, location, resolve, reject);} else {originReplace.call(this,location,() => {},() => {});}
};

三级联动路由跳转的优化

三级联动路由如下图所示：

点击’电子书‘后跳转的页面如下：

问题分析：
1、由于三级分类都是<a>标签，所以要实现路由跳转，最简单的方式就是将a标签换成
<router-link to="/search">，但是由于服务器的数据返回，循环语句的执行，可能在一瞬间，要加载几千个router-link，router-link是组件，组件需要创建，所以很耗费内存，最终会出现卡顿现象。
2、所以采用编程式导航来实现，编程式导航需要绑定事件，如果将事件绑定在每个<a>标签上，虽然不会出现卡顿现象了，但是当数据返回时，每次循环会就会导致有几千个回调函数，所以可以利用事件委派解决这个问题。
3、最好的解决方案是编程式导航结合事件委派。但是利用事件委派存在两个问题需要解决：

    3.1、全部的子节点的事件都委派给了父节点，但是我们需要的是点击一定是a标签，如何区别a标签和其它标签？在a标签上定义自定义事件data-categoryName，后面用dataset就能获取自定义属性及属性值；3.2如何获取参数【1、2、3级分类的产品的名字、id】？在1,2,3级分类上定义自定义属性data-category1Id、data-category2Id、data-category3Id，就能区分了

三级联动TypeNav的代码如下：
template内

 <!-- 将点击事件goSearch放在父元素上 --><div class="all-sort-list2" @click="goSearch"><div class="item" v-for="(c1,index) in categoryList" :key = "c1.categoryId"><h3><!-- 为了区别a标签和其它标签，在a标签上定义自定义事件data-categoryName，后面用dataset就能获取；1,2,3级区分同理 --><a :data-categoryName="c1.categoryName" :data-category1Id="c1.categoryId" >{{c1.categoryName}}</a></h3><div class="item-list clearfix"><div class="subitem" v-for="(c2,index) in c1.categoryChild" :key="c2.categoryId"><dl class="fore"><dt><a :data-categoryName="c2.categoryName" :data-category2Id="c2.categoryId" >{{c2.categoryName}}</a><!-- 声明式导航 --!><!-- <router-link to="/search">{{c2.categoryName}}</router-link> --></dt><dd><em v-for="(c3,index) in c2.categoryChild" :key="c3.categoryId"><a :data-categoryName="c3.categoryName" :data-category2Id="c3.categoryId" >{{c3.categoryName}}</a></em></dd></dl></div></div></div></div>

script内

 methods:{goSearch(event){//利用编程式导航和事件委派//事件委派会出现一些问题：1.全部的子节点的事件都委派给了父节点，但是我们需要的是点击一定是a标签let element = event.target;//dataset可以获取自定义属性与属性值（解构赋值）let {categoryname,category1id,category2id,category3id} = element.dataset;console.log(element.dataset)//   如果标签身上有categoryname那一定是a标签if(categoryname){//   alert(123);//整理路由跳转的参数let location = {name:"search"};let query = { categoryName:categoryname }// 2.如何获取参数【1、2、3级分类的产品的名字、id】if(category1id){query.category1Id = category1id}else if(category2id){query.category2Id = category2id}else{query.category3Id = category3id}location.query = query;this.$router.push(location);//   alert(123)}},

跨域问题

/api/request.js
1、对axios进行二次封装

//对axios进行二次封装
import axios from "axios";
//引入进度条
import nprogress from "nprogress";
//引入进度条的样式
import "nprogress/nprogress.css"
console.log(nprogress);
//利用axios对象的方法create，创建一个axios实例
const requests = axios.create({baseURL:"/api",//请求超时时间为5stimeout:5000,
});//请求拦截器：再发请求之前，请求拦截器可以监测到，可以在请求发出之前走一些事情
requests.interceptors.request.use((config)=>{//config：配置对象，对象里面有个属性很重要，headers请求头//进度条开始动nprogress.start();return config;
})
//响应拦截器
requests.interceptors.response.use((res)=>{//成功的回调函数：服务器响应数据回来以后，响应拦截器可以检测到，做一些事情//进度条结束nprogress.done();return res.data;
},(error)=>{//响应失败的回调函数return Promise.reject(new Error('faile'));
})//对外暴露
export default requests;

2、对接口进行统一管理
/api/index.js

//当前这个模块：对API进行统一管理
import requests from "./request";//三级联动接口
// /api/product/getBaseCategoryList    get   无参数
export const reqCategoryList = ()=>{//发请求  axios发请求，返回结果是promise对象//会出现跨域问题：协议、域名、端口号不同就会出现跨域问题//http://39.98.123.211//http://localhost:8080//解决方法：JSONP、CROS、代理(在config.js配置文件修改)return requests({url:'/product/getBaseCategoryList',method:"get"})
}

解决跨域问题方法一：代理跨域
在服务器和浏览器中间设置一个代理服务器，解决跨域问题
vue.config.js

module.exports = {//关闭eslint校验工具lintOnSave:false,//代理跨域devServer:{proxy: {"/api": {target: "http://39.98.123.211",//路径不需要重写，因为所有的接口都有/api//   pathRewrite: {"^/api" : ""}},},},}

轮播图解决浏览器异步数据及swiper问题

问题分析：
swiper插件完成轮播图需要两件事：首先将DOM结构渲染完成，然后再创建一个swiper实例。
但是我们从浏览器获取数据是异步的（获取数据也在mounted中），所以不能保证创建swiper实例时（在mounted生命周期函数内创建这个实例）就将DOM结构完成了，要解决这个问题，有以下三种方法：

1、update
当有其他数据时，其它数据进行更新，但轮播图的数据不更新时，都会再创建一次swiper实例然后再创建轮播图，所以这个方法不是特别好。
2、延时器
延时1秒，轮播图的功能才可以实现，此方法可行但也不是很完美。
3、watch+nextTick
如果只有watch，只能保证bannerList数据已经存入到仓库里了，但是不能确定v-for执行完毕，v-for执行完了才能保证DOM结构完成，所以需要结合nextTick来完成。
nextTick