尚硅谷尚品项目汇笔记（二）

                        ​​​​​​​        ​​​​​​​

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

---路由跳转两种方式：声明式导航，编程式导航

注意:编程式导航（push|replace）才会有这种情况的异常，声明式导航是没有这种问题，因为声明式导航 vue-router 底层内部已经解决这种问题。

这种异常，对于程序没有任何影响的。

为什么编程式导航会出现这种现象:

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

第一种解决方案：是给 push 函数，传入相应的成功的回调与失败的回调 (success)=>{} {error}=>{error}

this.$router.push(

{

name: 'search',

params: { keyword: this.keyword },

query: { k: this.keyword.toUpperCase() },

},

() => {},

() => {}

)

这种写法：治标不治本，将来在别的组件当中 push|replace,编程式导航还是有类似的错误

第一种解决方案可以暂时解决当前问题，但是以后再用 push|replace 还是会出现类似现象，因此我们需要从‘根’治病；

1.4

this 当前组件实例（search）

this.$router属性：当前的这个属性，属性值VueRouter类的一个实例，当在入口文件注册路由的时候，给组件实例添加$route|$router 属性

push:Vue 类的一个实例

function VueRouter(){

}

//原型对象的方法

VueRouter.prototype.push=function(){

//函数的上下文为 VueRouter 类的一个实例

}

let $router=new VueRouter();

$router.push(xxx)

this.$router.push();

2.Home 模块组件拆分

----先把静态页面完成

----拆分出静态组件

----获取服务器的数据进行展示

----动态业务

3.三级联动组件完成

---由于三级联动，在 Home、Search、detail,把三级联动注册为全局组件

好处：只需要注册一次，就可以在项目任意地方使用

4.完成其余静态组件

HTML+CSS+图片资源----信息【结构、样式、资源】

5.postman 测试接口

---刚刚经过 postman 工具测试，接口是没问题的

---如果服务器返回的数据 code 字段 200，代表服务器返回数据成功

---整个项目，接口前缀都有/api 字样

6.axios 二次封装

安装 axios

cnpm install --save axios

前端向服务器发数据

XMLHttpRequest、fetch、JQuery、axios

 

6.1 为什么需要进行二次封装 axios

请求拦截器、响应拦截器

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

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

6.2在项目中经常API文件夹【axios】

接口当中：路径都带有/api

baseURL:"/api"

http://xxx.xxx.8080/api

 

6.3如果有的同学axios基础不好，可以参考git|NPM关于axios文档

7.接口统一管理

项目小：完成可以在组件的生命周期函数中发请求

项目大：axios.get('xxx');

7.1跨域问题

什么是跨域：协议、域名、端口号不同请求，称之为跨域

http://localhost:8080/#home    ----前端项目的本地服务器

http://39.98.123.211            ----后台服务器

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

JSONP、CROS、代理

 

8.nprogress进度条的使用

start:进度条开始

done:进度条结束

cnpm install --save nprogress

 

9. vuex状态管理库

9.1 vuex是什么？

vuex是官方提供的一个插件，状态管理库，集中式管理项目中组件公用的数据

切记，并不是全部项目都需要Vuex，如果项目很小，完全不需要Vuex，如果项目很大，组件很多，数据很多，数据维护很费劲。  Vuex

cnpm install --save [email protected]

state

mutations

actions

getters

modules

9.2vuex基本使用

 

9.3vuex实现模块式开发

如果项目过大，组件过多，接口也很多，数据也很多,可以让Vuex模块式开发

模拟state存储数据

{

  count:1,

  search:{a:1},

  detail(888),

  pay:{100}

}