uni-app使用router-view后不能返回上一页

uni-app使用router-view后不能返回上一页

开发环境 版本号 项目创建方式
Windows 10 HBuilderX

操作步骤：

App.vue文件

<template>  
    <div>  
        App.vue  
        <router-view></router-view>  
    </div>  
</template>  
<script>  
    export default {  
        onLaunch: function() {  
            console.log('App Launch')  
        },  
        onShow: function() {  
            console.log('App Show')  
        },  
        onHide: function() {  
            console.log('App Hide')  
        }  
    }  
</script>  

<style>  

</style>

其他任意文件

<navigator open-type="navigateBack" :delta="1">返回</navigator>  

// js方式  
uni.navigateBack({  
     delta: 1,  
    success() {  
        console.log('success')  
    }  
});

预期结果：

预期结果返回上一页

实际结果：

不能返回上一页，navigationBar的返回也是不能返回上一页

bug描述：

当在App.vue中使用了router-view后，虽然页面正常显示，跳转也正常，但不能使用navigator标签方式和uni.navigateBack方式进行返回操作，而且uni.navigateBack方法回调success也是正常，就是页面不能后退

Image


更多关于uni-app使用router-view后不能返回上一页的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app使用router-view后不能返回上一页的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在App.vue中使用<router-view>会导致uni-app的路由机制与Vue Router产生冲突。uni-app内置了基于页面栈的原生导航系统，而<router-view>是Vue Router的组件，两者不兼容。

问题原因：

  1. uni-app的页面管理基于原生导航栈，每个页面是一个独立实例。
  2. 使用<router-view>后，所有页面内容都在同一个Webview中渲染，破坏了uni-app的页面栈结构。
  3. uni.navigateBack()操作的是原生页面栈，但实际页面切换发生在<router-view>内部，导致导航失效。

解决方案：

  1. 移除App.vue中的<router-view>，改用uni-app标准页面结构：

    • 在pages.json中配置页面路由
    • 使用uni.navigateTo进行页面跳转
    • 使用uni.navigateBack返回

  2. 如果必须使用Vue Router（如需要嵌套路由）：

    • 仅在小程序或H5端使用，App端不支持
    • 使用条件编译区分平台
    • 但会失去uni-app的多端统一导航体验

正确示例：

// pages.json
{
  "pages": [
    {
      "path": "pages/index/index",
      "style": { "navigationBarTitleText": "首页" }
    },
    {
      "path": "pages/detail/detail",
      "style": { "navigationBarTitleText": "详情页" }
    }
  ]
}

// 页面跳转
uni.navigateTo({
  url: '/pages/detail/detail'
})

// 页面返回
uni.navigateBack()
回到顶部