vue路由跳轉傳遞參數，query和params方式傳遞

vue路由跳轉( router-link的to屬性，或者this.$router.push()方法 ) 傳遞參數有兩種方式：query和params。

一、query傳參：

1.可以傳遞多個參數：  域名/list?name=aaa&pass=bbb

2.不需要另外配置路由

二、params傳參：

1.隻能傳遞一個參數:  域名/list/3

2.需要配置路由

代碼實作：

一、query方式：

1.配置跳轉路徑：

方法一：router-link的to屬性：

<router-link :to="{name:'/home',query:{username:'zhangsan',password:'123456'}}"></router-link>
           

方法二：this.$router.push()方法：

this.$router.push({
        path:'/home',
        query:{
          username:'zhangsan',
          password:'123456'
        }
      })
           

2.跳轉後的元件接收參數：（可以在mounted函數中擷取）

const n = this.$route.query.username
     const p = this.$route.query.password
           

二、params方式：

1.配置跳轉路徑：

方法一：router-link的to屬性：

<router-link :to="'/home'+goods_id"></router-link>
<!-- goods_id是data中的一個變量 -->
           

方法二：this.$router.push()方法：

this.$router.push('/home/'+goods_id)
           

2.配置路由規則：

{path:'/home/:id',component:Home} //id是自定義的一個變量，用于後面接收參數
           

3.跳轉後的元件接收參數：（可以在mounted函數中擷取）

const id = this.$route.params.id
           

附：vue路由官網