vue组件，父子通信，路由，异步请求后台接口，跨域

1.组件注册

1.1局部注册

局部注册组件---1.导入import 组件对象名 from '@组件网页路径' 

export default{
                                 name:"名称",
                                 data(){return {}},
                                 created(){},
                                 methods:{},
                                 components:{
                                    组件名:组件对象名
                                 }
                   }

1.2全局注册

 main.js        导入组件import 组件对象名 from '@组件网页路径'
                      Vue.component("组件名",组件对象名) 

2.vue父子通信

2.1父向子通信

父组件通过props将数据传递给子组件

父向子传值步骤

1. 给子组件以添加属性的方式传值

2. 子组件内部通过props接收

3. 模板中直接使用 props接收的值

 2.2子向父通信

子组件利用 $emit 通知父组件，进行修改更新

子向父传值步骤

1. $emit触发事件，给父组件发送消息通知

2. 父组件监听$emit触发的事件

3. 提供处理函数，在函数的性参中获取传过来的参数

3.路由

最大的原因就是：页面按需更新

要按需更新，首先就需要明确：访问路径和 组件的对应关系！

访问路径 和 组件的对应关系如何确定呢？ 路由

Vue中的路由：路径和组件的映射关系

3.1路由实现

1.声明式路由

<router-link to="/login>首页</router-link>

index.js里面注册

{path:'/login',name:'login',component:()=>import('../views/login.vue')
},

2.编码式路由

<el-button type="primary" @click="info">用户</el-button>

info(){this.$router.push("/info")
}

{path:'/info',name:'info',component:()=>import('../views/info.vue')
},

错误

NavigationDuplicated: Avoided redundant navigation to current location: "/register".

/router/index.js 添加

//获取原型对象上的push函数
const originalPush = VueRouter.prototype.push
//修改原型对象中的push方法
VueRouter.prototype.push = function push(location) {return originalPush.call(this, location).catch(err => err)
}

3.2路由传参

1.声明式

1.1查询参数传参

<router-link to="/路由路径?参数名=值&参数名=值">

对应的组件接受查询参数。

this.$route.query.参数名

<router-link to="/login?name=张三&age=15">首页</router-link>

export default {name: "login",created() {var name1=this.$route.query.name;var age1=this.$route.query.age;console.log(name1+"....."+age1)}
}

1.2动态路由传参

1. 配置动态路由：path: "/path/:参数名"

2. 跳转：to="/path/参数值"

3. 获取：this.$route.params.参数名

注意：动态路由也可以传多个参数，但一般只传一个

<router-link to="/index/15">主页</router-link>

{path:'/index/:key',name:'index',component:()=>import('../views/index.vue')
},

export default {name: 'index',created() {let key = this.$route.params.key;console.log(key)}
}

2.编程式

2.1查询参数传参

<el-button type="primary" @click="info">用户</el-button>

info(){this.$router.push("/info?k1=v1&k2=v2")
}

{path:'/info',name:'info',component:()=>import('../views/info.vue')
},

export default {name: "info",created() {// 查询参数都是使用querylet k1 = this.$route.query.k1;let k2 = this.$route.query.k2;console.log(k1+"....."+k2)}
}

2.2动态路由传参

<el-button type="primary" @click="info">用户</el-button>

this.$router.push("/info/17")

{path:'/info/:key',name:'info',component:()=>import('../views/info.vue')
},

export default {name: "info",created() {let key = this.$route.params.key;console.log(key)}
}

4.异步请求后台接口

1. 在main.js全局导入axios  import axios from 'axios'
2. 在main.js中 axios 挂载vue原生对象中 Vue.prototype.$http=axios
3. 在相应组件中使用axios    this.$http.请求方式("").then(resp=>{})

import axios from "axios";
// 把axios挂载到vue原型上,$http自己起
Vue.prototype.$http=axios

login(){this.$http.get("http://localhost:8080/user/login").then(resp=>{console.log(resp);})
},

跨域

通过ajax从一个域访问另一个域的过程。称为跨域。

如果他们的协议，ip，或端口。只要有一个不同。则称为不同的域。

1.后端解决

1.使用注解

2.编写一个跨域配置类

package com.example.config;import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;import java.util.Arrays;@Configuration
public class CorsConfig {@Beanpublic CorsFilter corsFilter() {CorsConfiguration configuration = new CorsConfiguration();configuration.setAllowedOriginPatterns(Arrays.asList("*")); //"192.168.3.150:8080", "192.168.1.20"configuration.setAllowedMethods(Arrays.asList("*")); //允许所有请求方法configuration.setAllowedHeaders(Arrays.asList("*")); //允许所有请求头configuration.setAllowCredentials(true);UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();source.registerCorsConfiguration("/**", configuration);return new CorsFilter(source);}
}

2.前端解决

login(){this.$http.get("api/user/login").then(resp=>{console.log(resp);})
},