vue-router路由传参的两种方式
日期:2020-06-04
来源:程序思维浏览:2228次
一、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
精品好课