vue 路由跳转传参的两种方式与区别
vue 路由跳转传参的两种方式与区别1.query传参(传参的内容会显示在地址栏上面)this.$router.push({path: '页面的路由',query: {id: '页面传参'}})新页面取参(刷新页面参数不会丢失):this.$route.query.id2.params传参(传参的内容不会出现在地址栏上)this.$router.push({name: '设置路由时的name值',
·
vue 路由跳转传参的两种方式与区别
1.query传参(传参的内容会显示在地址栏上面)
this.$router.push({
path: '页面的路由',
query: {
id: '页面传参'
}
})
新页面取参(刷新页面参数不会丢失):
this.$route.query.id
2.params传参(传参的内容不会出现在地址栏上)
this.$router.push({
name: '设置路由时的name值',
params: {
id: '页面传参'
}
})
新页面取参:
this.$route.params.id
注意:params传参,刷新页面数据会丢失,不想丢失可以在路由地址上添加预置位:
//router配置
const routes = [{
path: '/list/:id',
name: 'list',
component: List
}]
总结
query传参相当于get方式,会把要传递的参数显示在导航栏中。
params传参相当于post方式。默认不会把传递的参数显示在导航栏中。
更多推荐
已为社区贡献2条内容
所有评论(0)