path
:
'/detail/:id'
,
name
:
'detail'
,
component
:
Detail
this
.
$router
.
push
({
path
:
`/detail/
${id}
`
this
.
$route
.
params
.
id
注意：这种方式参数是以/id跟在url后，
刷新页面后参数不会丢失。
通过$route.push的params传参
(路由配置中未指定参数)
this.$router.push({
name:'detail',
params:{
id:id
this.$route.params.id
注意：这种方式的传参，必须使用name进行跳转，未在路由配置:id，url后不会显示id，刷新页面后参数会丢失。
2、通过query方式传参
path: '/detail',
name: 'detail',
component: Detail
this.$router.push({
path:'/detail',
query:{
id:id
this.$route.query.id
注意：这种方式的参数以?id跟在url后，类似get传参，并且，query必须使用path进行传参。刷新页面后参数不会丢失。
传递的参数是对象或数组
还有一种情况就是，如果通过query方式传递的是对象或数组，在地址栏中会被强制转换成[object Object]，刷新后页获取不到对象值。
那么我们可以通过JSON.stringify()方法将参数转换为字符串，在获取参数时通过JSON.parse转换成对象。
let parObj = JSON.stringify(obj)
this.$router.push({
path:'/detail',
query:{
obj:parObj
JSON.parse(this.$route.query.obj)
注意：这样虽然可以传对象，但是如果数据多的话地址栏会很长(不太推荐)。
3、使用props配合组件路由解耦
路由配置中指定参数:id
path:'/detail/:id',
name:'detail',
component:Detail,
props:true // 如果props设置为true，$route.params将被设置为组件属性
// 路由跳转
this.$router.push({
path:`/detail/${id}`
// 详情页获取参数
export default {
props:['id'], // 将路由中传递的参数id解耦到组件的props属性上
mounted(){
console.log("id",this.id);
路由配置中未指定参数:id
path:'/detail',
name:'detail',
component:Detail,
props:true // 如果props设置为true，$route.params将被设置为组件属性
// 路由跳转
this.$router.push({
name:'detail',
params:{
order:{
id:'123456789',
name:'商品名称'
// 详情页获取参数
export default {
props:['order'], // 将路由中传递的参数order解耦到组件的props属性上
mounted(){
console.log("order",this.order);
注意：路由配置中指定参数:id的，页面刷新后参数不会丢失，在路由配置未指定参数的，使用params跳转传参，页面刷新后参数会丢失。
此外，数据量比较大的参数，可以使用sessionStorage或localStorage来进行存储参数来解决页面刷新参数丢失的问题，具体结合实际项目即可。
