当前位置：首页 > news >正文

Vue跳转页面传递参数

news 2025/8/15 11:59:39

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);})
})