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

📌 联系方式

• 邮箱：2109664977@qq.com
• Gitee：我的Gitee
• GitHub：我的GitHub
• CSDN：我的CSDN
• 个人博客：访问我的博客

---

🎉 结语

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