vue路由传参

vue路由传参的几种方式

1.不使用vue-route组件的

1.1 使用sessionstorage/localstorage传参

localstorage/sessionStorage.setItem(‘a’, “value”) //存值

localstorage/sessionStorage.getItem(‘a’) //取值

1.2使用vuex传参

这里比较繁琐，会在下一篇vuex详解中看到

1.3 总结

这三种传参方式都比较繁琐，用起来有些小题大做，一般不会用到。

2. 使用vue-router组件的

2.1点击跳转页面(页面刷新数据不会丢失)

//跳转方法
this.$router.push({path: `/path/${id}`,})
//对应路由配置
{
  path: '/path/:id',
  name: 'path',
  component: path
}
//目标页面获取方法
this.$route.params.id

2.2点击跳转页面(页面刷新数据会丢失)

//跳转方法
this.$router.push(
{ 
	name: 'path',
	params: {id: id}
})
//对应路由配置
{
  path: '/path',
  name: 'path',
  component: path
}
//目标页面获取方法
this.$route.params.id

2.3点击跳转页面(目标页面浏览器url?id=1)

//跳转方法
this.$router.push({
	path: '/path',
	query: {id: id}
})
//对应路由配置
{
  path: '/path',
  name: 'path',
  component: path
}
//目标页面获取方法
this.$route.query.id

2.5 跳转新页面并传参

let routeData = this.$router.resolve({path:'/previewPDF',query:{id:id, name: name, downId: downId}}); 
//path是要跳转的路径，query内是要传的参数
window.open(routeData.href, '_blank');
//获取参数的方法
this.$route.query.downId

2.4总结

这种路由传参方式简便且好用，适用于日常项目中

注：路由跳转的时候用的是router,获取的时候使用的是route