1、编程式导航路由跳转到当前路由(参数不变), 多次执行会抛出NavigationDuplicated的警告错误?

注意:编程式导航（push|replace）才会有这种情况的异常，声明式导航是没有这种问题，因为声明式导航内部已经解决这种问题。这种异常，对于程序没有任何影响的。

为什么会出现这种现象:

由于vue-router最新版本3.5.2，引入了promise，当传递参数多次且重复，会抛出异常，因此出现上面现象

解决方法

router的index.js文件中写
//先把VueRouter原型对象的push保存
let originPush = VueRouter.prototype.push;
let originRepalce = VueRouter.prototype.replace;

// 重写push|replace,第一个参数告诉原来push方法往哪里传
VueRouter.prototype.push = function (location, resolve, reject) {
  if (resolve && reject) {
    originPush.call(this, location, resolve, reject);
  } else {
    originPush.call(
      this,
      location,
      () => {},
      () => {}
    );
  }
};
VueRouter.prototype.replace = function (location, resolve, reject) {
  if (resolve && reject) {
    originReplace.call(this, location, resolve, reject);
  } else {
    originReplace.call(
      this,
      location,
      () => {},
      () => {}
    );
  }
};

2 三级联动组件（全局）

三级联动组件 注册为全局组件 只注册一次则可用使用
在main.js中注册，此时则在其他vue文件中也可以使用
import TypeNav from "@/pages/Home/TypeNav";
Vue.component(TypeNav.name, TypeNav);

3 postman工具测试接口

gmall-h5-api.atguigu.cn/api/product… 发送get请求，返回200是可用的

4 axios二次封装

工作的时候src目录下的API文件夹，一般关于axios二次封装的文件

请求拦截器，可以在发送请求之前处理一些业务，

响应拦截器，当服务器数据返回以后，可以处理一些事情

cnpm install --save axios

//对axios进行二次封装
import axios from "axios";
//利用axios对象的方法create，取创建一个axios实例
//requesr就是axios 进行配置
const requests = axios.create({
  //基础路径，发请求的时候，路径会默认出现api
  baseURL: "/api",
  //请求c超时时间5s
  timeout: 5000,
});
//请求拦截器，在请求发出之前可以做一些事情
requests.interceptors.request.use((config) => {
  //config配置对象 对象里面有一个属性很重要，headers请求头
  return config;
});
//响应拦截器
requests.interceptors.response.use(
  (res) => {
    //成功回调的函数，服务器响应数据回来以后，响应拦截器可以检测
    return res.data;
  },
  (error) => {
    //服务器响应失败
    return Promise.reject(new Error("faile"));
  }
);
//对外暴露
export default requests;

5 跨域:如果多次请求协议、域名、端口号有不同的地方，称之为跨域

比如现在本地服务器为http://localhost:8080/#/home 而后台服务器向gmall-h5-api.atguigu.cn/发请求

解决跨域问题

//vue.config.js文件中添加
 devServer: {
    proxy: {
      "/api": {
        target: "http://gmall-h5-api.atguigu.cn/",
        // pathRewrite:{'^/api':''}
      },
    },
  },

6 进度条：nprogress模块实现进度条功能

cnpm install --save nprogress
在响应的时候可以使用
//引入进度条及样式
import nprogress from "nprogress";
import "nprogress/nprogress.css";
工作的时候，修改进度条的颜色，修改源码样式.bar类名
在请求拦截和响应拦截中使用

//对axios进行二次封装
import axios from "axios";
//引入进度条及样式
import nprogress from "nprogress";
import "nprogress/nprogress.css";
//start进度条开始 done：进度条结束

//利用axios对象的方法create，取创建一个axios实例
//requesr就是axios 进行配置
const requests = axios.create({
  //基础路径，发请求的时候，路径会默认出现api
  baseURL: "/api",
  //请求c超时时间5s
  timeout: 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;

7 Vuex

vuex:Vue官方提供的一个插件，插件可以管理项目共用数据。

vuex：书写任何项目都需要vuex？项目大、数据多、组件多的时候，需要有一个地方‘统一管理数据’即为仓库store

Vuex基本使用: cnpm install --save vuex@3

8 mapState

借助mapState生成计算属性，从state中读取数据

import { mapState } from "vuex";
export default{
  name:"a",
  data(){}
  computed:{
    sum(){
      return this.$store.state.sum
    },
     school(){
      return this.$store.state.school
    }
    //等价于
    ...mapState(['sum','school'])
  }
}

Vue项目实战注意点-part2