this.$router.push传递参数有两种方式:
1、传递参数:this.
r
o
u
t
e
r
.
p
u
s
h
(
p
a
t
h
:
′
路
由
′
,
q
u
e
r
y
:
k
e
y
:
v
a
l
u
e
)
参数取值:
t
h
i
s
.
router.push({path:'路由',query:{key:value}}) 参数取值:this.
router.push(path:′路由′,query:key:value)参数取值:this.router.query.key
使用这种方式,传递参数会拼接到路由后边,出现在地址栏
2、传递参数 – this.
r
o
u
t
e
r
.
p
u
s
h
(
n
a
m
e
:
’路由的
n
a
m
e
′
,
p
a
r
a
m
s
:
k
e
y
:
v
a
l
u
e
)
参数取值–
t
h
i
s
.
router.push({name: ’ 路由的name ', params: {key: value}}) 参数取值 – this.
router.push(name:’路由的name′,params:key:value)参数取值–this.route.params.key
使用这种方式,参数不会拼接在路由后面,地址栏上看不到参数
动态路由也是传递params的,所以在 this.$router.push() 方法中 path不能和params一起使用,否则params将无效。需要用name来指定页面。
学习链接
<router-link to="/login?id=10&name=zs">登录</router-link>
<router-link :to="{path:'/register',query:{id:5,name:'lili'}}">注册</router-link>
或
<router-link :to="{name:'register',query:{id:5,name:'lili'}}">注册</router-link>
等同于:
this.$router.push('/login?id=10&name=zs')
this.$router.push({path:'/register',query:{id:5,name:'lili'}})
或
this.$router.push({name:'register',query:{id:5,name:'lili'}})
注意:params只能通过name来引入路由,path会undefined
jquery传参和params传参的区别
1.用法上:
上文已经提到query可以用name或path来引入
params必需要用name来引入,接收参数都是类似的,分别是:
this.
r
o
u
t
e
.
q
u
e
r
y
.
n
a
m
e
和
t
h
i
s
.
route.query.name和this.
route.query.name和this.route.params.name。
2.地址栏表现形式上:
query:
/login?id=10&name=zs=
params:
/login/12/ls