Vue学习-中级

1 Vue-Router

（1）路由：决定数据包从来源到目的地的路径
（2）转送：将输入端的数据转移到合适的输出端
（3）路由表：本质上是一个映射表，决定了数据包的指向

作者：iakul
链接：https://www.zhihu.com/question/28725977/answer/42077482
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

前端渲染（SPA、单页面应用）

浏览器中的大部分内容，都是由前端写的JS代码在浏览器中执行最终渲染出的网页

SPA：整个网页只有一个html页面，在前后端分离基础上加了一层前端路由

前后端分离阶段（前端渲染）

后端提供API返回数据，前端通过Ajax获取数据，并通过JavaScript渲染到页面

前端路由：页面跳转的URL规则匹配由前端来控制

后端渲染（SSR、服务端渲染）

后端路由阶段

网页的HTML在后端通过模板引擎渲染后再交给前端

注：服务器如何处理网站的多个页面？
每个页面都有其对应的URL，URL会发送到服务器，服务器通过正则对该URL进行匹配，并最后交给一个controller处理，controller处理后将生成的HTML和数返回给前端

缺点：HTML和数据混在一起

改变URL页面不自动刷新：
（1）location.hash

（2）history.pushState(对象参数，title参数，url）
history.back()
history.go()
history.replaceState({},’’,‘url’)

路由的默认路径

path:''
redirect:'/home'

router-link补充

（1）tag属性：决定渲染成什么组件
（2）replace属性：不会留下history记录
（3）active-class：设置css样式

2 Promise

Promise是异步编程的一种解决方案

//请求成功调用resolve，请求失败调用reject
new Promise（（resolve，reject）=>{
	//这里只进行网络请求
}）.then() //这里进行网络处理
.catch() //对reject进行处理

promise的三种状态

（1）pending：等待状态，正在进行网络请求

（2）fulfill：满足状态，即请求成功，调用resolve，并回调then()

（3）reject：拒绝状态,即请求失败，调用reject，并回调catch()

promise的all方法

    Promise.all([
      new Promise((resolve,reject)=>{
        $ajax({
          url:'url1',
          success:function(data){
            resolve(data)
          }
        })
      }),
      new Promise((resolve,reject)=>{
        $ajax({
          url:'url2',
          success:function(data){
            resolve(data)
          }
        })
      }),
    ]).then(results=>{
      console.log(results[0]);
      console.log(results[1]);
    })

3 Vuex

Vuex为Vue.js应用程序开发的状态管理模式

 state:{
    counter:1000
  },
  mutations:{
    add(state){
      state.counter++
    }
  },
//调用方式
$store.state.counter
this.$store.commit('add')

单一状态树：一个对象内部包含了所以需要的数据，即state定义了所有需要的状态数据

getters：当数据变化后给其他组件使用时

注：getters不能传递参数，如果要这样做则需要返回函数

mutations:里面的方法必须是同步方法

store状态更新的唯一方式：提交mutation

提交参数： this.$store.commit('addF',count)
多个参数使用一个对象接收

mutations响应式规则

一旦属性定义在store中，就会被加入到响应式系统中，该系统会监听属性的变化。当属性发生变化时，会通知所有界面中用到该属性的地方进行页面刷新

//响应式添加属性
Vue.set(state.info,'address','xinguo')
//删除属性
Vue.delete(state.info,'age')

Action

Action类似于mutation，不过是用于处理异步操作的

Modules是将store分隔成模块，每个模块拥有自己的store等属性

Axios

同时发送多个请求：

axios.all([请求1，请求2])

当**method=‘get’**时，对应

params：{}

当**method=‘post’**时，对应

data：{}

拦截器：请求/响应拦截

axios.interceptors.request/response.use(成功的函数，失败的函数)

应用场合：
1、当config中的一些信息不符合服务器要求
2、希望每次发送网络请求时，在界面显示一个请求图标
3、某些网络请求，必须携带一些特殊信息（如登录）