Vue跳转页面传递参数

Vue跳转页面传递参数

🌟 前言

欢迎来到我的小天地，这里是我记录技术点滴、分享学习心得的地方。📚

🛠️ 技能清单

• 编程语言：Java、C、C++、Python、Go、
• 前端技术：Jquery、Vue.js、React、uni-app、Echarts
• UI设计: Element-ui、Antd、Color-ui
• 后端技术：Spring Boot、Mybatis-plus、Swagger
• 移动开发：Android
• 操作系统：Windows、Linux
• 开发框架：RuoYi、微信小程序
• 开发工具：VSCode、IDEA、Eclipse、WebStorm、HbuildX、Navicat、Xshell、Android Studio、Postman
• 数据库技术：MySQL、Redis、SQL Server
• 版本控制：Git

---

需求：从搜索页跳到详情页，传递搜索参数到详情页，详情页调用API获取数据，渲染到页面。

请注意，query用于传递查询参数（URL中的?param=value部分），而params用于传递命名路由的参数（URL路径中的/:param部分）。在实际开发中，应根据具体需求选择合适的方式传递参数。

路由

import { createRouter, createWebHistory } from "vue-router";const router = createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes: [{path: "/",name: "layout",component: () => import("../LayoutView.vue"),redirect: "/recommend",children: [{path: "/recommend",name: "recommend",component: () => import("../views/RecommendView.vue"),},{path: "/detail",name: "detail",component: () => import("../views/DetailView.vue"),},],},],
});export default router;

页面一

主要代码

import {ref} from "vue";const search = ref("");
import {useRouter, useRoute} from 'vue-router'
const router = useRouter()
function handleSearch() {const data = search.value;router.push({path: "/detail",query: {data}})
}

页面二

主要代码

import {onMounted} from "vue";
import {useRouter, useRoute} from 'vue-router'
import api from "@/api";const route = useRoute()
const search = route.query.data;
onMounted(() => {const searchVal = JSON.stringify(search);api.home.search(searchVal).then((rs: any) => {console.log(rs.data.result.songs);})
})

📌 联系方式

• 邮箱：[e-mail]
• Gitee：我的Gitee
• GitHub：我的GitHub
• CSDN：我的CSDN
• 个人博客：访问我的博客

---

🎉 结语

感谢你的访问，如果你对我的技术文章或项目感兴趣，欢迎通过以上方式与我联系。让我们一起在技术的道路上不断前行！🚀