vue-router之间的操作

既然用了vue，那么vue-router就是在项目开发中必不可少的一部分操作了，这里我特意整理了一些在vue项目开发过程中涉及到的一些操作吧。

一、路由之间传参

由A路由到B路由之间的传参，可以通过$router的query和param传递，用query传递的参数，会在浏览器的url路径中展示出来，不具有保密性，但是刷新后依旧存在，由param传递的参数，不会在浏览器的url路径中展示出来，而且刷新后不会再在当前页面中展示，具体使用方法如下：

this.$router.push({
    path: "/imp/style",
    query:"params"
})

this.$router.push({
    path: "/imp/style",
    query:{key:value}
})

this.$router.push({
    path: "/imp/style",
    param:{key:value}
})

this.$router.push({
    path: "/imp/style",
    param:"params"
})

取值方法：

query:
this.$route.query
param:
this.$route.param

二、父子组件之间传参

父组件

先在父组件中引入子组件，

import childToP from './childToP'

然后在tempate里面使用

<div class="context">
        <div>这是父组件
            <p>{{message}}</p></div>
        <childToP @childData="getData"></childToP>
</div>

定义一个@childData="getData"方法，接收子组件传递给父组件的事件，@childData这个方法是子组件里定义的。

​
 methods: {
            getData(getVal) {
                  // getVal就是子组件的操作事件传过来的值
                this.message = getVal;
            },
        },

​

父组件向子组件传参

如果需要从父组件里向子组件传递信息或者点击事件，可以在使用子组件的时候，在子组件上绑定属性和要传递的事件，要先在data里面声明该属性，即：pdata，然后在子组件里面使用props来接收，

import toC from './toC'

<to-C :msgFromP="pdata" :aaa="func"></to-C>

<template>
    <div class="context">
        this is aaa
        <to-C :msgFromP="pdata" :aaa="func"></to-C>
    </div>
</template>

<script>
    import toC from './toC'

    export default {
        components: {toC},
        name: "parentToC",
        data() {
            return {
                pdata: 'this is parent message'
            }
        },
        methods: {
            //这里是在父组件定义的方法，在子组件里面也可以接收，然后通过对子组件的操作实现你的目的
            func() {
                console.log('ccc');  
            }
        }
    }
</script>

在子组件里面接收

<template>
    <div class="context222">
        <p class="text" @click="aaa">{{msgFromP}}</p>
    </div>
</template>
<script>
    export default {
        name: "toC",
        props: {
            msgFromP: '',
            aaa: null
        }
    }

子组件

在子组件中，可以直接在div里写你要传递的信息，不需要使用 this.$emit() 方法也可；

<template>
    <div class="context">
        <div>{{msg1}}</div>
    </div>
</template>

<script>
    export default {
        name: "childToP",
        data() {
            return {
                msg1:'这是子组件这是子组件这是子组件',
             
            }
        }
    }
</script>

子组件向父组件传参

如果你需要操作父组件里面的数据或者给父组件发信息，先定义一个点击事件，然后用 this.$emit("childData", this.msg) 方法，把子组件里要传递的信息发送过去即可。

<template>
  <div class="context">
      <div @click="tomsg">这是子组件</div>
  </div>
</template>

<script>
    export default {
      name: "childToP",
      data(){
        return{
          msg:"this is child data"
        }
      },
      methods:{
        tomsg(){
            // 这里也可以是对象
            let data="这是子组件里面的数据"
            this.msg=data
            this.$emit("childData",this.msg)
        }
      }
    }
</script>