【day2】尚品汇

1. 编程式路由跳转到当前路由（参数不变），多次执行会抛出NavigationDuplicated的警告错误？
   – 路由跳转有两种形式：声明式导航、编程式导航
   – 声明式导航没有这类问题，因为vue-router底层已经处理好了
   1.1 为什么编程式导航进行路由跳转的时候，就有这种警告呢？
   “vue-router”:“^3.5.3”:最新的vue-router引入promise

1.2 通过给Push方法传递相应的成功、失败的回调函数，可以捕获到当前错误，可以解决。

1.3通过底部的代码，可以实现解决错误

    this.$router.push(
        {
            name:"search",
            params:{
               keyword: this.keyword,
            },
            query:{
                k:this.keyword.toLocaleUpperCase()
            }
        },()=>{}, ()=>{}
    )

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

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

//配置路由的地方
import Vue from "vue"
import VueRouter from "vue-router"
// 使用插件
Vue.use(VueRouter)
//建个对象 配置 路由规则
import Home from '@/pages/Home'
import Search from '@/pages/Search'
import Login from '@/pages/Login'
import Register from '@/pages/Register'

// 先把VueRouter原型对象的push，先保存一份
let originPush = VueRouter.prototype.push;
let originReplace = VueRouter.prototype.replace;
// 重写push|replace
// 第一个参数：告诉原来push方法，你往哪里跳转（传递哪些参数）
// 第二个参数：成功回调
// 第三个参数：失败回调
// call||apply区别
// 相同点：都可以调用函数一次，都可以篡改函数的上下文一次
// 不同点：call与apply传递参数：call传递参数用逗号隔开，apply方法执行，传递数组
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, () => { }, () => { });
    }
}

const routes = [
    //放置路由规则
    // 重定向，在项目跑起来的时候，访问/,立马让他定向到首页
    {
        path: "/",
        redirect: "/home",
        meta: { show: true }

    },

    {
        path: "/home",
        component: Home,
        meta: { show: true }
    },
    {
        // 进行占位
        path: "/Search/:keyword?",
        component: Search,
        meta: { show: true },
        name: "search",

        // 4. 路由组件能不能传递props数据？
        //  1)布尔值写法：params    
        //    props:true,
        // 2)对象写法：额外的给路由组件传递一些props
        // props:{a:1,b:2}
        // 函数写法：可以params参数、query参数，通过props传递给路由组件
        props: ($route) => ({ keyword: $route.params.keyword, k: $route.query.k })
    },
    {
        path: "/Login",
        component: Login,
        meta: { show: false }
    },
    {
        path: "/Register",
        component: Register,
        meta: { show: false }
    },


]

//启用路由规则 建立路由

const router = new VueRouter({
    mode: "history",
    routes
})
//导出
export default router;

2. Home模块组件拆分
   – 先把静态页面完成
   – 拆分静态组件
   – 获取服务器的数据进行显示
   – 动态业务

3. 三级联动组件完成
   — 由于三级联动，在Home、Search、Detail等页面都有使用,因此把三级联动注册为全局组件。
   好处：只需要注册一次，就可以在项目任意地方使用’

4: 完成其余静态组件
HTML　+ CSS　+　图片资源

５. postman 测试接口
– 刚刚经过postman工具测试，接口是没有问题的
– 如果服务器返回的数据code字段200，代表服务器返回数据成功
– 整个项目，接口前缀都有/api字样

6. axios二次封装
   XMLHttpRequest、fetch、JQ、axios
   6.1为什么需要进行二次封装axios?
   请求拦截器、响应拦截器
   请求拦截器：可以在发请求之前可以处理一些业务、
   响应拦截器：当服务器数据返回以后，可以处理一些事情

6.2 在项目当中经常API文件夹【axios】
接口当中：路径都带有/api
baseURL:“/api”
6.3 有同学axios基础不好，可以参考git|NPM关于axios文档

7.1 跨越问题
什么是跨域: 协议、域名、端口号不同请求，称之为跨域
http://localhost:8082/home — 前端项目本地服务器
http://39.98.123.211 —后端服务器
解决方法： JSONP，CROS、代理

8: nprogress进度条的使用
start:进度条开始
done:进度条结束
进度条颜色可以修改的，当然需要修改人家的样式

9：vuex状态管理库
9.1： vuex是什么？
vuex是官方提供一个插件，状态管理库，集中式管理项目中组件共用的数据。
切记，并不是全部项目都需要vuex，如果项目很小，完全不需要Vuex，如果项目很大，组件很多，数据很多很费劲，vuex
state
mutations,
actions,
getter,
modulesx实现模块式开发
9.2 vuex基本使用
创建文件夹store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
// 需要使用插件一次
Vue.use(Vuex);
// state:仓库存储数据的地方
const state = {
  count:1
};
// mutations:修改state的唯一手段
const mutations = {
  ADD(state){
      state.count++;
  }
};
// actions:处理action，可以书写自己的业务逻辑，也可以处理异步
const actions = {
  // 这里可以书写业务逻辑，但是不能修改state
  add({commit}){
      commit("ADD");
  }
};
// getters:理解为计算属性，用于简化仓库数据，让组件获取仓库的数据更加方便
const getters ={};

// 对外暴露store类的一个实例
export default new Vuex.Store({
  state,
  mutations,
  actions,
  getters

})

main.js进行引入仓库

import Vue from 'vue'
import App from './App.vue'
// 引入路由
import router from '@/router'
Vue.config.productionTip = false
// 三级联动组件----全局组件
import TypeNav from '@/pages/Home/TypeNav';
// 第一个参数：全局组件的名字，第二个参数：哪一个组件
Vue.component(TypeNav.name,TypeNav)

// 测试
import { reqCategoryList } from '@/api';
reqCategoryList();

// 引入仓库
import store from '@/store'

new Vue({
  render: h => h(App),
  // 注册路由：底下的写法KV一致省略V【router小写】
  // 注册路由信息：当这里书写router的时候，组件身上都拥有￥route,$router属性
  router,
  // 注册仓库：组件实例的身上会多了一个$store属性
  store
}).$mount('#app')

home.vue 实现计数器

<template>
  <div >
    我是首页
    <!-- 三级联动全局组件：三级联动已经注册为全局组件，因此不需要再引入 -->
  
    <button @click="add">点击我加上1</button>
    <span>仓库的数据{{ count }}</span>
    <button>点击我减去1</button>
  </div>
</template>
<script>
// 引入其余的组件
import ListContainer from "@/pages/Home/ListContainer";
import Recommend from '@/pages/Home/Recommend';
import Rank from '@/pages/Home/Rank';
import Like from '@/pages/Home/Like';
import Floor from '@/pages/Home/Floor';
import Brand from '@/pages/Home/Brand';
import {mapState} from 'vuex'
export default {
name: '',
components:{
    ListContainer,
    Recommend,
    Rank,
    Like,
    Floor,
    Brand
},
data() {
return {}; 
},
computed:{
    ...mapState(['count'])
},
methods:{
    //派发action 
    add(){
       this.$store.dispatch('add') 
    }
    
}
};
</script>
<style scoped ></style>

9.3 vue
如果项目过大，组件过多，接口也很多，数据也很多，可以让vuex实现模块式开发
模拟state存储数据
{
count：1
search:{a:1},
detail:{sss},
pay:{}
}

进行模块化开发

import Vue from 'vue'
import Vuex from 'vuex'
// 需要使用插件一次
Vue.use(Vuex);
// 引入小仓库
import home from './home';
import search from './search';
// 对外暴露store类的一个实例
export default new Vuex.Store({
  modules:{
      home,
      search
  }

})

10:完成TypeNav三级联动展示数据业务

[
    {
        id:1,
        name:"电子书",
        child:[
            {
                id；2，
                name:"喜羊羊",
                child;[]
            }
        ]
    }
]