既然用了vue，那么vue-router就是在項(xiàng)目開發(fā)中必不可少的一部分操作了，這里我特意整理了一些在vue項(xiàng)目開發(fā)過程中涉及到的一些操作吧。

路由之間傳參

由A路由到B路由之間的傳參，可以通過$router的query和param傳遞，用query傳遞的參數(shù)，會(huì)在瀏覽器的url路徑中展示出來，不具有保密性，但是刷新后依舊存在，由param傳遞的參數(shù)，不會(huì)在瀏覽器的url路徑中展示出來，而且刷新后不會(huì)再在當(dāng)前頁面中展示，具體使用方法如下：

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>

定義一個(gè)@childData="getData"方法，接收子組件傳遞給父組件的事件，@childData這個(gè)方法是子組件里定義的，如果自組建立未定義，那在父組件里可以不用接收。

 methods: {
            getData(getVal) {
                  // getVal就是子組件的操作事件傳過來的值
                this.message = getVal;
            },
        },

父組件向子組件傳參

如果需要從父組件里向子組件傳遞信息或者點(diǎn)擊事件，可以在使用子組件的時(shí)候，在子組件上綁定屬性和要傳遞的事件，要先在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: {
            //這里是在父組件定義的方法，在子組件里面也可以接收，然后通過對(duì)子組件的操作實(shí)現(xiàn)你的目的
            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>

子組件向父組件傳參

如果你需要操作父組件里面的數(shù)據(jù)或者給父組件發(fā)信息，先定義一個(gè)點(diǎn)擊事件，然后用
this.$emit("childData", this.msg) 方法，把子組件里要傳遞的信息發(fā)送過去即可。

<template>
  <div class="context">
      <div @click="tomsg">這是子組件</div>
  </div>
</template>
<script>
    export default {
      name: "childToP",
      data(){
        return{
          msg:"this is child data"
        }
      },
      methods:{
        tomsg(){
            // 這里也可以是對(duì)象
            let data="這是子組件里面的數(shù)據(jù)"
            this.msg=data
            this.$emit("childData",this.msg)
        }
      }
    }
</script>