随着移动互联网的快速发展，移动应用开发逐渐成为了开发者们优先考虑的领域之一。相对而言，现在的应用不仅要保证美观、流畅，还要有更好的用户体验。因此，开发者们也花费更多的时间在颜色、动画、界面风格等细节上，并喜欢使用嵌套路由的方式来进行管理和调用。
近期使用 uniapp 开发移动应用时，我遇到了一个组件里跳转路径不同的问题，希望在这里和大家分享一下解决方法。
问题描述
我在 uniapp 中使用了 uni-list 组件，在列表中展示了多个内容，在点击某个内容时需要进入到具体的详情页面。可以通过 navigateTo 进行跳转，跳转逻辑如下：
uni.navigateTo({
url: '/pages/detail/detail?id=' + id
});其中 detail 页面是在 pages 文件夹下已经创建了的。
但是当我通过这种方式跳转时，发现无论在哪个列表页面，跳转后的 detail 页面所在的 url 路径都是 /pages/detail/detail?id=。这样的话，在使用 uni.showModal 返回上一页时，无法正确返回到之前的列表页面。
原因分析
经过分析，这是由于我在 App.vue 文件夹中使用了 uni-simple-router 进行路由管理，需要对它进行设置。具体是在 config 文件夹下的 router.js 中进行设置。在这里，同样需要使用 navigateTo 进行跳转，但需要注意的是，它的路径设置方法和普通的路径设置是不同的。
解决方法
可通过以下两种方法来解决这个问题：
1. 直接使用 uni.navigateTo
这种方式相比较而言较为简单，只需要在 list 组件中添加 bindtap 或 @click 事件：
然后在 methods 中添加跳转逻辑：
methods: {
redirectToDetail(id) {
uni.navigateTo({
url: '/pages/detail/detail?id=' + id
});
}
}这样，在每个页面中都会调用 redirectToDetail 方法，跳转到具体的页面。
2. 使用 uni-simple-router
使用这种方式的前提是我们已经在 App.vue 中使用了 uni-simple-router 进行路由管理，并已经在 config 中配置好了 routes。
在 list 组件的 methods 中，需要添加如下方法：
methods: {
redirectToDetail(id) {
uni.$router.push({
path: '/pages/detail/detail?id=' + id
});
}
}这里调用了 $router.push 方法，path 属性中需要填写完整的路径，包括文件夹名称、文件名和参数。通过这种方式跳转后，每个页面的路径都会不同，可以正确返回上一页。
总之，无论是直接使用 uni.navigateTo 还是使用 uni-simple-router，在跳转时都需要注意路径的设置方式，以便于正确地跳转到需要展示的页面，以及返回到之前的页面。对于问题的分析和解决，也能更好地帮助开发者了解路由的使用和配置。
