vue-router路由传参的两种⽅式
⼀、params和query理解
params⽅法传参的时候，要在路由后⾯加参数名占位；并且传参的时候，参数名要跟路由后⾯设置的参数名对应。/user/:uname    这个路由匹配/user/wade, /user/james  这⾥的 uname 叫 paramsreact router传参数
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在浏览器地址栏中不显⽰参数名称
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在浏览器地址栏中显⽰参数名称
localhost:8080/user?uname=james
获取参数⽅式:
this.$route.query.uname