vue路由跳转传递参数方式

一、直接在路由中写参数（刷新页面参数不会丢失）

//路由配置文件
//需要配置动态路由
{
	path: '/detail/:id',
	name: 'Detail',
	component: Detail
}

//跳转时页面
var id = 1;
this.$router.push({
	path: `/detail/${id}`,
})

//跳转后页面 获取参数
this.$route.params.id

二、通过query属性传值（刷新页面参数不会丢失）

//路由配置文件
{
	path: '/detail',
	name: 'Detail',
	component: Detail
}

//跳转时页面
this.$router.push({
  path: '/detail',
  query: {
    name: '张三',
    id: 1,
  }
})

//跳转后页面获取参数对象
this.$route.query

三、通过params属性传值（刷新页面参数会丢失）

//路由配置文件中
{
	path: '/detail',
	name: 'Detail',
	component: Detail
}

//跳转时页面
this.$router.push({
  name: 'Detail',
  params: {
    name: '张三',
    id: 1,
  }
})
 
//跳转后页面获取参数对象
this.$route.params