什么行业必须做网站,郑州网站建设 天强科技,深圳设计公司名字,湖州集团网站建设Vue跳转页面传递参数
#x1f31f; 前言 欢迎来到我的小天地#xff0c;这里是我记录技术点滴、分享学习心得的地方。#x1f4da; #x1f6e0;️ 技能清单 编程语言#xff1a;Java、C、C、Python、Go、前端技术#xff1a;Jquery、Vue.js、React、uni-app、EchartsUI…Vue跳转页面传递参数 前言 欢迎来到我的小天地这里是我记录技术点滴、分享学习心得的地方。 ️ 技能清单 编程语言Java、C、C、Python、Go、前端技术Jquery、Vue.js、React、uni-app、EchartsUI设计: 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中的?paramvalue部分而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);})
})联系方式
邮箱2109664977qq.comGitee我的GiteeGitHub我的GitHubCSDN我的CSDN个人博客访问我的博客 结语
感谢你的访问如果你对我的技术文章或项目感兴趣欢迎通过以上方式与我联系。让我们一起在技术的道路上不断前行
