index.vue向test.vue传参数
路由router.js配置如下:
{
path: ‘/index’,
name: ‘index’,
component: () => import(’…/pages/index’)
},
{
path: ‘/test’,
name: ‘test’,
component: () => import(’…/pages/test’)
},
1.使用params
index.vue中:
this.
r
o
u
t
e
r
.
p
u
s
h
(
n
a
m
e
:
′
t
e
s
t
′
,
/
/
路
由
中
的
n
a
m
e
p
a
r
a
m
s
:
n
a
m
e
:
′
h
e
l
l
o
,
t
e
s
t
′
)
t
e
s
t
.
v
u
e
使
用
参
数
:
t
h
i
s
.
router.push({ name: 'test', // 路由中的name params: { name: 'hello,test' } }) test.vue使用参数: this.
router.push(name:′test′,//路由中的nameparams:name:′hello,test′)test.vue使用参数:this.route.params.name
缺点:刷新test页面,name值丢失
2.使用query
index.vue中:
this.$router.push({
name: ‘test’, // 路由中的name
query: { name: ‘hello,test’ }
})
test.vue使用参数:
this.$route.query.name
刷新test页面,name值不丢失
在开发中,若希望刷新页面后接收的参数不丢失,应该使用query方法