编程式导航路由传参的三种方式

一、编程式导航基本跳转的两种语法：

    1) path路径跳转(最常用，简易方便)
    方式一:
    this.$router.push('路由路径')
    方式二:
    this.$router.push({
      path: '路由路径'
    })

   2) name命名路由跳转 (适用于路径很长的情况)
   this.$router.push({
     name: '路由名'
   })
// 前提: 要给定义的路由对象加名字

二、这两种跳转方式都支持下面三种路由传参方法：

1. 动态路由传参 （一般不传字符串，一般id，需要配动态路由）

路由配置 /user/:id?

跳转路由 this.$router.push('/user/666')

如何获取 this.$route.params.id

  1. path路径跳转时用动态路由传参
       方式一:
        this.$router.push('/path/参数值')
        方式二:
        this.$router.push({
          path: '/path/参数值'
        })
 2.  name命名路由跳转时用动态路由传参
    this.$router.push({
         name: "search",
         params: {
          参数名: 参数值
         }
       });
   

2. query传参（ 刷新不丢失，地址栏拼接）

路由配置  /user 
跳转路由  
  (1) this.$router.push('/user?username=zs&password=123456')
  (2) this.$router.push({
         path: '/user',
         query: {
            username: 'xx',
            password: 'xx'
         }
      })

如何获取 this.$route.query.username

1.path路径跳转时用query传参
        方式一:
        this.$router.push('/path?参数名=参数值&...')
        方式二:
        this.$router.push({
          path: '路由路径',
          query: {
            参数名1: 参数值1,
            ....
          }
        })
  2.name命名路由跳转时用query传参
       this.$router.push({
             name: "search",
             query: {
              参数名: 参数值
             }
           });

3. params传参 （内存中传递，刷新会丢失）

 路由配置  /user  name="user"
 跳转路由
   this.$router.push({
     name: 'user',
     params: {
        username: 'xx',
        password: 'xx'
     }
   })
 如何获取  this.$route.params.username

结论：

平时工作中，比较常用 动态路由传参 和 query 传参