前端开发 参数传递 vue页面跳转传参的两种实现方式解析

🔍 关键词相关内容：

前端开发 🛠️

• 涉及技术：HTML/CSS/JavaScript、Vue/React/Angular
• 核心场景：页面交互、数据渲染、状态管理

参数传递 📤📥

• 作用：组件/页面间共享数据
• 常见方式：Props、URL、状态管理（如Vuex/Pinia）

Vue页面跳转传参的两种实现方式 🔄

1. Query参数（URL传参） 🌐

   • 通过router-link或this.$router.push传递：

     this.$router.push({ path: '/detail', query: { id: 123 } });  

   • 接收：this.$route.query.id

2. Params参数（动态路由） 🛣️

   

   • 需提前配置路由：{ path: '/detail/:id', component: Detail }
   • 传递：

     this.$router.push({ name: 'Detail', params: { id: 123 } });  

   • 接收：this.$route.params.id

⚠️ 注意：Params方式在页面刷新后参数可能丢失，适合短时传递；Query参数更持久。

💡 小贴士：Vue3中可用useRouter()和useRoute()替代this.$router/this.$route。
参考：2025-07前端技术文档及Vue官方更新）