1、路由傳值得實現方式
不侷限於父子元件，任意得元件之間都可以進行傳值使用路由

2、
配置路由檔案index.js，告訴瀏覽器我要傳一個什麼引數
再router-link得to中設定要傳的值是什麼
傳給誰就在哪個元件中進行資料得接收：this.$route.params.id
$route：用來獲取路由得，跳轉得路由物件，每一個路由上都會有一個$route物件，是一個區域性物件
$router：是VueRouter得一個物件，通過得是路由得構造器得到得router這個物件，是一個全域性物件，它包含所有路由

3、不需要對路由檔案進行配置，直接使用params引數進行傳值(所傳得值是不會顯示再位址列中得，換句話來說，你想傳什麼值就可以傳什麼值)

4、query進行傳值：
再顯示是顯示再位址列中得，並且顯示得方式是？後邊
再接收得時候使用得：this.$route.query.key值進行接收得

案例：

路由表：

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import Gongsi from '@/components/gongsi'
Vue.use(Router)

export default
 
 new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },{
      // path:'/gongsi/:id',    // 前兩種方法都需要設定ID
        path:'/gongsi', 
      component:Gongsi,
      children:[
        {
          path:'/',
          name:'gongsi',
          component:GongsiOne
        }
 

      ]
    },    
  ]
})

路由元件

<template>
    <div>
        <ul>
            <li><router-link to="/">首頁</router-link></li>
           
      <!-- 四種傳值      -->
             <!-- <li><router-link to="/gongsi/aa">公司</router-link></li>   第一種方法-->   
             <li @click="getDes(aa)"><router-link to="/gongsi">公司</router-link>     第二種方法</li>
                 <!-- <li><router-link :to="{name:'gongsi',params:{id:aa}}">公司</router-link>  </li> 第三種方法-->
                  <!-- <li><router-link :to="{name:'gongsi',query:{id:aa}}">公司</router-link>    </li> 第四種方法 -->
            
        </ul>
    </div>
</template>

<script>

export default {
    name: 'Nav',
    data () {
        return {
             aa:'我是nav孫子元件',
        }
    },
    methods: {
       getDes (id) {           //@click事件傳值
           //需要給當前路由例項新增引數   第二種方法的函式
           this.$router.push({     //包含所有路由 一個router物件，在跳轉之前
               path:'/gongsi/test'  + id          //同樣屬於id傳值
           })
       }
    }
}
</script>

<style scoped>
   div{
       background-color:#186;
       height :50px;
   }
   li{
       float: left;
       margin-right:20px ;
   }
</style>

接收元件

<template>
    <div>    
        <router-view></router-view> 
    </div>
</template>

<script>

export default {
    name: 'gongsi',
    methods:{
 
    },
    created () {
        console.log(this.$route.params.id)  // 前三種方法接收

     //   this.$route  //僅限於當前 用來獲取路由,跳轉之後獲取

        console.log(this.$route.query.id)   //顯示在url上  第三種方法的接收
    } 
}
</script>

<style scoped>
   div{
       background-color:#186;
       
   }
</style>