Vue路由传参两种方式

在vue-router路由中，传参方式一般分两种：

一种是利用$route.query对象的Get方式传参，与http的get方式一样，会将参数暴露到地址栏，使用方式如下：

路由请求发起(编程式导航)：

this.$router.push({path:'/selectById', query: {id: this.id}});

参数接收：

{{this.$route.query.searchBody}}

另一种是利用$route.params对象的Post方式传参，该方式具有一定限制，必须通过路径传参方式。

路由配置（根组件的路由配置js，若是vue-cli构建则为src/router/index.js）:

import Vue from 'vue'
import Router from 'vue-router'
import User from '@/components/User'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      redirect: 'index'
    },
    {
      path: '/selectById/:id',
      component: User
    }
  ]
})

路由请求发起：

this.$router.push({path:'/selectById', params: {id: this.id}});

参数接收：

{{this.$route.params.searchBody}}

以上是常用的两种router传参方式，特别需要注意如果params不通过路径地址传参的话是取不到值的。