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)
 }

解决方法

Logo

前往低代码交流专区

更多推荐