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里面使用

        
这是父组件
            
{{message}}
        

定义一个@childData="getData"方法，接收子组件传递给父组件的事件，@childData这个方法是子组件里定义的，如果自组建立未定义，那在父组件里可以不用接收。

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

父组件向子组件传参

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

import toC from './toC'

在子组件里面接收

子组件向父组件传参

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