vue跳路由传参的三种方法

在前端vue项目开发中，跳路由传参是一项很基本也很重要的功能，它能实现不同页面之间的跳转，并且可以携带必须的数据，本文分享一下目前常用的三种路由传参方式。

在跳路由传参以前，需要先定义路由规则，再导出router示例

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

const router = new Router({
	mode:'history',
	routes:[
		{
			path:'/index',
			name:'index',
			component:()=>import('../views/Index/index')
		},
		{
			path:'/',
			redirect:'/index'
		},
		{
			path:'*', 
			component:()=>import('../views/notFound')
		}
	]
})


export default router

一、params传参

this.$router.push({
					name: 'index',
					params: {
						id: 123456,
						name: '李白'
					}
				})

params传参需要注意的是，获取到router实例后，需要用name和路由规则中routes的name相对应，关联上以后，就可以跳转到对应路由页面，然后在params中搭配参数就可以完成参数传递。

在index页面，可以通过this.$route.params获取到参数信息。

优点：参数的传递不会直接在url地址栏中展示，可以对用户关键信息进行保密

缺点：刷新页面会丢失传递过来的参数

二、query传参

this.$router.push({
				path: '/index',
				query: {
					id: 123456,
					name: '张三'
				}
			})

与params传参不同的是，query传参需要用path来关联路由规则中routes的path，并且参数是在query对象中进行传递。

在index页面，可以通过this.$route.query获取到参数信息。

优点：刷新页面，参数不会丢失

缺点：参数暴漏在url地址

三、params动态路由传参

使用这个方法前，需要在路由规则中重新定义

例如：

{
			path:'/index',
			name:'index',
			component:()=>import('../views/Index/index')
}

//把上述path路径改成如下格式

{
			path:'/index/:id',
			name:'index',
			component:()=>import('../views/Index/index')
}

 再请求时用拼接的方法将参数置后

this.$router.push({path:'/index/'+123456})

在index页面，可以通过this.$route.params获取到参数信息。

优点：刷新不会丢失参数

缺点：参数暴漏在url地址

三种方法中各有其用，根据特定情况使用即可。