既然用了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>
