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

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

步骤一：

新建文件夹目录。

代码：

	"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跳转， 就需要添加一个点击事件监听器，如下所示：

导入

代码：

@click="navigateToDetails(item)"

	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全部代码

{"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"}]}
}