vue router传参的三种方式

先看看以下代码示例中的用到的路由表

{
  name: 'news',
  path: '/news',
  meta: { title: '新闻动态' },
  component: () => import('@/views/news')
},
{
  name: 'detail',
  path: '/detail/:id',
  meta: { title: '新闻详情' },
  component: () => import('@/views/detail')
}

我们实现路由的跳转有两种方法，声明式和编程式，一般情况下用到编程式的方法来实现的情况会比较多，直接用router 的实例方法push()就能完成。
在 Vue 实例内部，可以通过$router访问路由实例。因此你可以调用 this.$router.push

一、params传参

$route.params 类型: Object。
一个 key/value 对象，包含了动态片段和全匹配片段，如果没有路由参数，就是一个空对象

this.$router.push({ name: 'news', params: { type: 1 }})

此时浏览器url上是看不到任何参数的，像这样http://localhost:9530/news
另外需要注意的是，params传参时如果刷新页面，参数是会丢失的

通过路由的名字的传参的话，必须使用路由对象的属性params。

对于像path: '/detail/:id'这样的携带参数的动态路由，传参时也应当使用params，动态路由传参是可以再url上看到的，像这样http://localhost:9530/detail/121。

二、query传参

***route.query.user == 1，如果没有查询参数，则是个空对象。

const type = 1
this.$router.push({ path: 'news', query: { type: type  }})

此时浏览器url上是可以看得到参数的，像这样http://localhost:9530/news/?type=1
通过query传的参数在页面刷新时不会丢失。

前面说到的传参都是比较简单的键值对。如果要传一个内容比较多的对象应该怎么传？
可以先用JSON.stringfy()把参数格式化，传到页面之后再用JSON.pares()去解析
但是这个方法会让页面的url过于冗长很不美观，所以比较好的方式是，页面之间传对象的话用store

三、props传参

params和query这两种传参方式用的是比较多的，最近我在写项目的时候看到使用props去传参的。这里也记录一下
路由配置如下

{
  name: 'news',
  path: '/news',
  component: () => import('@/views/news'),
  meta: { title: '新闻详情' },
  props: { type: 1 }
}

通过props的方式传参时，在组件内的取值方式也是通过props，像父子组件传值那样

props: ['type']

取值时也像使用组件参数一样取值

this.type

路由传参的props形式还有以下几种写法
(1)props:true;
通过props设置为true,可以进行布尔传值,可以接受params的方法进行传递

(2)props:{ key1:60, key2:70 };
通过props为对象的方式进行处理静态数据，可使用对象模式，上面示例中用到的就是props的静态传参

(3)props:(route)=>( { key:route.query.key })
通过props为函数时进行传值,此时用的query方式进行参数的传递