12.vue-路由传值

1、路由传值得实现方式
不局限于父子组件，任意得组件之间都可以进行传值使用路由

2、
配置路由文件index.js，告诉浏览器我要传一个什么参数
再router-link得to中设置要传的值是什么
传给谁就在哪个组件中进行数据得接收：this.$route.params.id
$route：用来获取路由得，跳转得路由对象，每一个路由上都会有一个$route对象，是一个局部对象
$router：是VueRouter得一个对象，通过得是路由得构造器得到得router这个对象，是一个全局对象，它包含所有路由

3、不需要对路由文件进行配置，直接使用params参数进行传值(所传得值是不会显示再地址栏中得，换句话来说，你想传什么值就可以传什么值)
直接再router-link得to中进行值得配置即可
需要使用v-bind对to属性进行绑定

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>