vue-router路由传参

Hello！大家早上好呀 今天给大家分享一下vue-router路由传参的方法，要使用router-link跳转的前提必须要使用router-view以后使用router-link才可以生效，但是你不写router-view也是可以路由跳转的只不过是换一种写法而已。

  this.$router.push( { path : ' /to '} );

第一种传参方法
然后咱们在HelloWorld这个组件里面跳转到Header在Header组件中接收这个color的参数，HelloWorld组件写法
没点击调转之前咱们先看下URL地址

然后咱们点击跳转按钮按理来说可以跳转到Header组件，我在Header中写了一句话：
然后现实往往和咱们想的有点不一样甚至有点惊喜哈哈，看图↓
虽然跳转到了Header路由为什么咱们写的字没有显示呢？这是怎么回事呢？这时候咱们要在URL地址后面写一个参数因为上面咱们在路由那里规定了一个参数，在这里咱们输入参数才能看到路由的内容。

接收参数咱们简单明了

  this.$route.params  //接收参数

 第一种方法总结：路由规定参数 /header/:color   //color是一会咱们要传的参数
                接收参数：this.$route.params //接收参数

第二种传参方法

   <router-link :to="{ path : '/Header',query:{type : 'get'} }">点击跳转</router-link>

使用query的方法传参使用key，value的方法传参。

看下点击调转以后URL地址的变化（这样看起来大家是不是很熟悉了呢？）：

接收参数：

Header组件接收：

  this.$route.query //接收参数

第二种方法总结：

      使用query：{ type : 'number'}  来传参  
      接收参数：this.$route.query    接收参数

总结vue-router路由传参

    1: /Header/:color  //传参    this.$route.params //接收参数
    2: query : { type : 'String' } //传参   this.$route.query //接收参数

github地址： https://github.com/Liingot/vueRouter-demo

今天就到这里谢谢大家 溜了溜了溜了 ！！！