VUE路由传参的两种方式
1、使用query传参(类似于get方式)
//跳转地址和携带的参数,跳转的地址path的值需要与路由中的path的值对应
this.$router.push({path: '/test', query: {name: 'tom'}})
//路由表配置
routes = [
{
path: '/test'
name: 'test'
component: TestComponent
}
]
//接受传过来的参数
this.$route.query.name
2、使用params传参(类似于post方式)
// 跳转地址和携带的参数,跳转的地址name的值需要与路由中的name的值对应
this.$router.push({name: 'test', params: {name: tom}})
//路由表配置
routes = [
{
path: '/test'
name: 'test'
component: TestComponent
}
]
//接受传过来的参数
this.$route.params.name
注意事项:
1、使用params传参,只能使用name写跳转的地址,并且需要与路由中name值相同
2、使用params传参,当跳转页面成功之后,可以获取到传的参数,但是页面刷新之后,传的参数获取不到,变成undefind,可以在路由表对应的路由的path中的添加对应的参数(/:param),这样的话,刷新页面后,不会变成undefind,还可以获取到
3、使用query传参,在路由表对应的路由的path中不需要添加对应的参数(/:param)
4、使用query传参跳转地址也可以使用name,但是需要与路由表中对应的路由中的name匹配