vue-router 路由跳转传参刷新页面后参数丢失问题

最新推荐文章于 2024-09-25 06:14:45 发布

甜甜凉白开

最新推荐文章于 2024-09-25 06:14:45 发布

阅读量1.8w

点赞数 21

CC 4.0 BY-SA版权

文章标签： vue.js

原文链接：https://www.cnblogs.com/coolsboy/p/14143016.html

本文详细介绍了在Vue中进行路由跳转时，如何通过params、query和props三种方式传递参数。params方式适用于不需要在URL显示参数的情况，但刷新后参数可能会丢失；query方式类似于GET请求，参数保留在URL，刷新后仍可获取；props则可以直接将参数作为组件属性，简化组件与路由的交互。对于大量数据，建议使用sessionStorage或localStorage来避免刷新丢失问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

常见场景：点击列表详情，跳转到详情内页，传递id参数获取详情数据。

我们先来看看路由跳转的几种方式：

1、通过params方式传参

通过$route.push的path携带参数方式(路由配置中指定参数)

// 路由配置
{ 
   path: '/detail/:id',  //若id后面加?代表这个参数是可选的，即使不传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来进行存储参数来解决页面刷新参数丢失的问题，具体结合实际项目即可。