vue路由传参,刷新页面不丢失参数
1.使用params传参通过配置name传参,name是你要跳转的路由名字this.$router.push({name: 'content',params: {id: id}})在content页面,使用params获取created () {this.articleId = this.$route.params.id}在router路由配置...
·
1.使用params传参
通过配置name传参,name是你要跳转的路由名字
this.$router.push({
name: 'content',
params: {
id: id
}
})
在content页面,使用params获取
created () {
this.articleId = this.$route.params.id
}
在router路由配置中,在content后面必须配置id,否则刷新页面,获取不到id值,但是id值会暴露在网址中。
{
path: 'content/:id',
name: 'content',
component: resolve => require(['@/components/Content'], resolve)
}
2.通过query传参
2.1通过配置path传参,传id值
this.$router.push({
path: '/content',
query: {
id: id
}
})
在content页面,使用query获取,但是会显示成content?id=id的格式,会暴露id值
created () {
this.articleId = this.$route.query.id
}
router路由配置
{
path: 'content',
name: 'content',
component: resolve => require(['@/components/Content'], resolve)
}
2.2传递对象
this.$router.push({
path: '/content',
query: {
article: article
}
})
在content页面,使用query获取对象,但在网址中会显示成/content/article=[object Object]。query里的每一项值应该是字符串,如果传一个对象进去会被强制转成[object Object]。点击进入路由可以获取对象值,但是刷新页面会导致获取不到对象值。
created () {
this.article = this.$route.query.article
}
router路由配置
{
path: 'content',
name: 'content',
component: resolve => require(['@/components/Content'], resolve)
}
更多推荐
已为社区贡献6条内容
所有评论(0)