Vue路由传参

废话不多说，上干货！

1.基本路由传参

传值：

写法一：

this.$router.push('/path地址?参数1=值1&参数2=值2')

写法二：

this.$router.push({
     path:'/path地址',
     query:{
        参数1:值1,
        参数2:值2
      }
  })

接收：

this.$route.query.参数名

注意区分router 和 route 

router:路由的实例化对象，管理整个路由

route：提供当前路由的基本信息

2.动态路由匹配

路由配置：

{
  path:'/path地址/参数名?'        //?表示参数传值可传可不传，不带?则一定要传
   
  component:.......

}

参数名后的?表示参数传值可传可不传，不带?则一定要传

传：

this.$router.push('/path地址/参数值')

收：

this.$route.params.参数名

3.命名路由name传参

路由配置：

{
  path:'/',
   
  name:'home'

}

一（query）：(刷新不受影响)

传：

this.$router.push({
     name:'home',
     query:{
        参数:值
      }
  })

收：

this.$route.query.参数名

二：（params） (刷新后参数就没了，数据长度和类型不受限制，不会在url中显示，存在内存中)

传:

this.$router.push({
     name:'home',
     params:{
        参数:值
      }
  })

收：

this.$route.params.参数名