Vue发起get/post请求 组件之间的通信

 axios.get('http://localhost:8080/user/list',{params:{}}).then(result=>{
                    if(result.data.code==200){
                        this.userlist=result.data.data;
                        console.log(result)
                    }else{
                        alert(result.data.msg);
                    }

                }).catch(error=>{

                    console.log(error)
                })

params为携带的参数    then后面的参数为服务器端发来的数据

axios.post('http://localhost:8080/user/del',users).then(result=>{
                        if(result.data.code==200){
                            this.$router.push("/index");
                        }else{
                            alert(result.data.msg);
                        }

                    }).catch(error=>{

                        console.log(error)
                    })

请求链接后 为请求服务器带去的数据

 

为父组件设置子组件

{
    path:"/index",component: index,
    children:[
        { path: "/user", component: user},
        { path: "/adds", component: adds},
        { path: "/update",name:'update',component: update }
    ]
}

path为设置跳转的路径,component为组件的定义名字

 

组件之间的通信 注意:在哪里的事件 就在哪个组件里面发起跳转

this.$router.push({name:"update",params:{user:user}});//params为跳转到相应的组件传的值,必须用name 不可以直接跳转

//接收上面组件的传值,哪个组件需要接收写在哪个组件里面

created() {
    this.user=this.$route.params.user; //params后面为上面传过来的值,要对应 this.user为当前组件里的值
}

//根节点的设置

let vue = new Vue({
    el: "#app",
    components: {
        login,//根节点下的登录组件
        index,//根节点下的主页组件
     }, router//注册路由

});


//相关支持

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>//vue的支持
<script src="https://cdn.jsdelivr.net/npm/vue-router@3.5.2/dist/vue-router.js"></script>//路由支持
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>//发起请求支持
//首页组件包含添加组件,用户列表组件与修改组件因此,这三个组件需要在首页的组件下面定义

const index = {
        template: "#index",
        components: {
            user,
            adds,
            update,

        },  data(){
            return{
                user:''
            }
        },
        methods: {
            gotoadd(){

                this.$router.push("/adds");

            },
            gotouser(){
                this.$router.push("/user");
            },


        }

    }

 

总结:vue中当前点击的事件发生在哪个组件里面 在哪个组件里面写事件,组件中嵌套组件需要在父组件中进行注册
设置子组件时需要在创建的vue实例中定义跳转
在根节点中需要显示的组件需要挖坑(定义点击要显示的组件)

<router-view></router-view>//这里将会显示对应事件的组件