Vue3 学习

末蓝、 2022-09-11 05:21 179阅读 0赞

## 9.使用Axios实现异步通信 ##

### 9.1 什么是Axios ###

Axios是一个开源的可以用在浏览器端和NodeJS的异步通信框架，他的主要作用就是实现AJAX异步通信，其功能特点：

*  从浏览器中创建`XMLHttpRequests`
 *  从`node.js`创建`http`请求
 *  支持`Promise API` //支持链式编程的
 *  拦截请求和响应
 *  转换请求数据和响应数据
 *  取消请求
 *  自动转换\`JSON\`\`数据
 *  客户端支持防御`XSRF`（跨站请求伪造）

### 9.2 为什么要使用Axios ###

由于Vue.js是一个 **视图层框架** 并且作者尤雨溪严格遵守 `SoC` （关注度分离原则），所有Vue.js并不包含AJAX的通信功能，为了解决通信问题，作者单独开发了一个名为`vue-resource`的插件，不过在进入2.0版本以后停止了对该插件的维护并推荐Axios框架

### 9.3 第一个Axios应用程序 ###

#### 项目添加插件 ####

npm install --save axios vue-axios   //cnpm install --save axios vue-axios

#### 加载 ####

//main.js入口文件
    import { createApp } from 'vue'
    import axios from 'axios'
    import VueAxios from 'vue-axios'
    import App from './App.vue'  //导入根组件
    
    const app = createApp(App); //创建组件实例
    app.use(VueAxios,axios)   //为App组件绑定插件
    app.mount("#app")         //挂载

#### 使用 ####

this.axios.post("/login",{
        username:"zhangyali",
        password:"123456"
    }).then(response=>{
        console.log(response);
    }).catch(error=>{
        console.log(error);
    })

## 10.vue-router4基础 ##

### 10.1 安装vue-router@4 ###

npm install vue-router@4
    yarn add vue-router@4

### 10.2 引入 ###

import {createRouter,createWebHashHistory} from 'vue-router'

### 10.3 路由配置 ###

//定义路由（和组件）
    const Home = import('./components/home.vue');
    const About = import('./components/about.vue');
    const Product = import('./components/product.vue');
    
    //定义路由
    const routes = [
    {path:'/',component:Home},
    {path:'/about',component:About},
    {path:'/product',component:Product},
    ];
    
    //创建路由
    const router = createRouter({
    	history: createWebHashHistory(),
    	routes,//定义的路由
    })
    
    //将路由加入到实例
    use（router);

### 10.4 路由应用 ###

router-view 组件显示容器  
router-link 链接

### 10.5 带参数的动态路由匹配 ###

const routes =[
    	{path:"/",component:ShowBlogs},
    	{path:"/add",component:AddBlog},
    	//动态路由
    	{path:"/single-blog/:id",component:SingleBlog},
    ];

##### 通信匹配 #####

//通信地址，例如：https://jsonplaceholder.typicode.com/posts/4
    。。。
    this.axios.get("https://jsonplaceholder.typicode.com/posts/"+this.id)          //get()方法接收一个URL作为参数，如果要传递参数
    	  .then(response=>{             //以?key=value的形式附加在URL上
    	      console.log(response);
    		 this.blog = response.body;
    	  })
    。。。

##### 获取params（例如：/posts/4中的4） #####

this.$route.params