vue-router路由傳參的兩種方式

一、params和query理解

params方法傳參的時候，要在路由后面加參數名占位；並且傳參的時候，參數名要跟路由后面設置的參數名對應。
/user/:uname    這個路由匹配/user/wade, /user/james  這里的 uname 叫 params

query方法，就沒有這種限制，直接在跳轉里面用就可以。
/user?uname=wade  /user?uname=james  這里的 uname 叫 query

 

二、query的用法

路由配置： // 使用params傳參，路由配置的時候 path 要帶上參數
{
   path: '/user/:uname',
   name: "users",
   component: User    //這個 User 是組件名稱
}
 跳轉方式： // 方法1：
<router-link :to="{ name: 'users', params: { uname: wade }}">按鈕</router-link>
// 方法2：
this.$router.push({name:'users',params:{uname:wade}})
// 方法3：
this.$router.push('/user/' + wade)

頁面url顯示
params在瀏覽器地址欄中不顯示參數名稱
http://localhost:8080/user/wade

獲取參數方式:
this.$route.params.uname

 

三、params的用法

路由配置 //使用 query 傳參  這里不需要參入參數，參見上面的params寫法
{
   path: '/user',   
   name: "users",
   component: User    //這個 users 是傳進來的組件名稱
}

跳轉方式： // 方法1：
<router-link :to="{ name: 'users', query: { uname: james }}">按鈕</router-link>
// 方法2：
this.$router.push({ name: 'users', query:{ uname:james }})
// 方法3：
<router-link :to="{ path: '/user', query: { uname:james }}">按鈕</router-link>
// 方法4：
this.$router.push({ path: '/user', query:{ uname:james }})
// 方法5：
this.$router.push('/user?uname=' + jsmes)
 頁面url顯示：
query在瀏覽器地址欄中顯示參數名稱
http://localhost:8080/user?uname=james

獲取參數方式: 
this.$route.query.uname