uniapp小程序分包路由跳转+二级页面详情跳转保留当前页方法教程

server/2025/1/14 22:13:50/

uniapp小程序分包+路由跳转+二级页面详情跳转保留当前页,进入二级页面,可以返回上一级页面。也就是保留当前页,这里用的是vue3+uniapp+uv-ui组件库

步骤一:

新建文件夹目录。

代码:

javascript">	"subPackages": [{// 动态详情二级页面"root": "page_details","pages": [{"path": "pages/details/details","style": {"navigationBarTitleText": "详情"}}]},// 首页二级页面{"root": "page_index","pages": [{"path": "pages/develop/develop","style": {"navigationBarTitleText": "详情"}},{"path": "pages/qualifications/qualifications","style": {"navigationBarTitleText": "资质认证"}}]}],

步骤二:

要实现点击新闻项 (news-item) 跳转到详情页面 (pages/details/details) 并且保留当前页面,可以返回上一页,需要在 Vue 组件的 <script> 部分添加一个方法来处理点击事件,并使用 uni.navigateTo 方法进行页面跳转。

例如需要点击 news-item跳转, 就需要添加一个点击事件监听器,如下所示:

导入

代码:

javascript">@click="navigateToDetails(item)"
javascript">	import { ref } from 'vue';import { useRouter } from 'vue-router';const router = useRouter();const navigateToDetails = (item) => {uni.navigateTo({url: '/page_details/pages/details/details' // 你需要跳转的页面路由地址// 你可以在URL后面添加查询参数,比如 ? id=item.id});};

这样就可以实现uniapp开发小程序中点击跳转保留当前页跳转了。

pages.json全部代码

javascript">{"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages{"path": "pages/index/index","style": {"navigationBarTitleText": "首页"}},{"path": "pages/product/index","style": {"navigationBarTitleText": "产品",// "navigationBarTextStyle": "white","navigationStyle": "custom"}},{"path": "pages/dynamics/index","style": {"navigationBarTitleText": "动态","navigationStyle": "custom"}},{"path": "pages/my/index","style": {"navigationBarTitleText": "我的","navigationStyle": "custom"}}],"subPackages": [{// 动态详情二级页面"root": "page_details","pages": [{"path": "pages/details/details","style": {"navigationBarTitleText": "详情"}}]},// 首页二级页面{"root": "page_index","pages": [{"path": "pages/develop/develop","style": {"navigationBarTitleText": "详情"}},{"path": "pages/qualifications/qualifications","style": {"navigationBarTitleText": "资质认证"}}]}],"globalStyle": {"navigationBarTextStyle": "black","navigationBarTitleText": "uni-app","navigationBarBackgroundColor": "#F8F8F8","backgroundColor": "#F8F8F8"},"uniIdRouter": {},"tabBar": {"color": "#929292","backgroundColor": "#ffffff","selectedColor": "#2D8BFF", // 底部文字点击后的颜色"borderStyle": "white","position": "bottom","list": [{"pagePath": "pages/index/index","text": "首页","iconPath": "/static/index.png","selectedIconPath": "/static/indexd.png"},{"pagePath": "pages/product/index","text": "产品","iconPath": "/static/product.png","selectedIconPath": "/static/productd.png"},{"pagePath": "pages/dynamics/index","text": "动态","iconPath": "/static/dynamics.png","selectedIconPath": "/static/dynamicsd.png"},{"pagePath": "pages/my/index","text": "我的","iconPath": "/static/my.png","selectedIconPath": "/static/myd.png"}]}
}


http://www.ppmy.cn/server/158387.html

相关文章

HarmonyOS应用开发者初级认证最新版– 2025/1/13号题库新版

1.欢迎各位读者&#xff0c;本文档来自鸿蒙开发学员亲测&#xff0c;最新版。&#xff08;考试时直接Ctrlf进行搜索&#xff0c;一定要认真比对答案&#xff0c;有的答案相似度很高&#xff09;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01; 欢迎…

nexus搭建maven私服

说到maven私服每个公司都有&#xff0c;比如我上一篇文章介绍的自定义日志starter&#xff0c;就可以上传到maven私服供大家使用&#xff0c;每次更新只需deploy一下就行&#xff0c;以下就是本人搭建私服的步骤 使用docker安装nexus #拉取镜像 docker pull sonatype/nexus3:…

HarmonyOS鸿蒙-@State@Prop装饰器限制条件

一、组件Components级别的状态管理&#xff1a; State组件内状态限制条件 1.State装饰的变量必须初始化&#xff0c;否则编译期会报错。 // 错误写法&#xff0c;编译报错 State count: number;// 正确写法 State count: number 10; 2.嵌套属性的赋值观察不到。 // 嵌套的…

vue3之router路由

路由 1、对路由的理解 2、基本使用 安装路由器扩展包 npm i vue-router 创建组件&#xff1a; Home.vue <template><div class"home"><img src"https://oss.fmy90.cn/fmy/public/4db8dec4d2eb31b8b0456cb42a907941.png" alt""…

python milvus 如何检查有多少个collection 以及多少个index,多少个database

在 Milvus 中,可以通过 Python 客户端(`pymilvus`)来检查当前有多少个集合(Collection)、索引(Index)和数据库(Database)。以下是具体的方法: --- ### 1. 检查有多少个集合(Collection) 使用 `list_collections()` 方法可以列出当前连接的所有集合。 ```python…

【Python】Python之Selenium基础教程+实战demo:提升你的测试+测试数据构造的效率!

这里写目录标题 什么是Selenium&#xff1f;Selenium基础用法详解环境搭建编写第一个Selenium脚本解析脚本脚本执行结果常用的元素定位方法常用的WebDriver方法等待机制 Selenium高级技巧详解页面元素操作处理弹窗和警告框截图和日志记录多窗口和多标签页操作 一个实战的小demo…

用python实战excel和word自动化

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 python实现excel和word自动化--批量处理 前言--需求快要期末了需要&#xff0c;提交一个年级的学生成绩数据&#xff0c;也就是几百份。当前我们收集了一份excel表格&#xf…

给DevOps加点料:融入安全性的DevSecOps

从前&#xff0c;安全防护只是特定团队的责任&#xff0c;在开发的最后阶段才会介入。当开发周期长达数月、甚至数年时&#xff0c;这样做没什么问题&#xff1b;但是现在&#xff0c;这种做法现在已经行不通了。 采用 DevOps 可以有效推进快速频繁的开发周期&#xff08;有时…