VUE路由传参的三种基本方式

vue中路由传参的三种基本方式

在vue项目中我们在路由中需要接触到最多的就是路由之间的传值，在这里主要介绍了vue自带的路由传参的3种基本方式。

场景一：单击当前页的按钮跳转到另一个页面，并将数据传到另一个页面。

<div class="btn" @click="jump(1)">跳转携值</div>

方法1：页面刷新数据不会丢失

methods:{
	jump(id){
		this.$router.push({
			path:"/article/"+id
		})
	}
}

路由配置如下：

{
	path: '/article/:id', // /:id 对应携带的参数，子组件即可获取传递的参数值。获取方式：this.$route.params.id
	name: 'article',
	component: () => import('...')
}

方法2：页面刷新数据会丢失

methods:{
	jump(id){
		// 通过路由属性中的name来确定匹配的路由，使用params传递参数
		this.$router.push({
			name: 'article',
			params:{
				id
			}
		})
	}
}

路由配置如下：

{
	path:'/article',
	name: 'article',
	component: ()=>import('...')
}
// 子组件获取参数 this.$route.params.id

方法3：使用path来匹配路由，通过query来传递参数。这种情况下query传递的参数会显示在地址栏中url?id=‘传值’。

methods:{
	jump(id){
		this.$router.push({
			path: '/article',
			query:{
				id
			}
		})
	}
}

对应路由配置如下：

{
	path:'/article',
	name: 'article',
	component:()=>import('...')
}
// 子组件获取参数 this.$route.query.id

特别注意

route与router的区别。route表示路由属性；router表示路由实例。

以上3种是路由传参的基本方式。除了以上几种还可以使用sessionStorage/localStorage/cookie进行存储也可以进行存储也可以，使用VUEX也行，具体因场景而异。