vue-router路由传参的两种方式

一、params和query理解

params方法传参的时候，要在路由后面加参数名占位；并且传参的时候，参数名要跟路由后面设置的参数名对应。

/user/:uname    这个路由匹配/user/wade, /user/james  这里的 uname 叫 params
query方法，就没有这种限制，直接在跳转里面用就可以。

/user?uname=wade  /user?uname=james  这里的 uname 叫 query

二、query和params的用法

params:

路由配置：

// 使用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在浏览器地址栏中不显示参数名称



获取参数方式:

this.$route.params.uname

query:

路由配置

//使用 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在浏览器地址栏中显示参数名称



获取参数方式:

this.$route.query.uname