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);})
})
📌 联系方式
- 邮箱:2109664977@qq.com
- Gitee:我的Gitee
- GitHub:我的GitHub
- CSDN:我的CSDN
- 个人博客:访问我的博客
🎉 结语
感谢你的访问,如果你对我的技术文章或项目感兴趣,欢迎通过以上方式与我联系。让我们一起在技术的道路上不断前行!🚀