寻找与iOS/MacOS UINavigationController功能对等的Vuetify组件

Vuetify 没有提供直接对标 iOS/MacOS UINavigationController 的开箱即用视图栈原生组件，但提供了可快速拼装出该功能的基础组件，不需要完全从零开发。

可用核心组件 #

• v-window：作为视图栈的核心容器，本身支持多子项切换、自定义过渡动画，完全适配视图推入/弹出的交互逻辑。每个v-window-item对应一个栈内视图，你只需要用数组维护栈的层级，数组长度变化时即可自动触发视图切换。
• v-app-bar：用来实现顶部导航栏，可根据当前栈的长度动态控制返回按钮的显隐，点击返回按钮时对栈数组执行pop操作即可完成视图弹出逻辑。
• slide-x-transition：Vuetify 内置的过渡组件，包裹v-window即可实现类似iOS端的左右滑动切换动画，也可以自定义transition参数匹配原生系统的动画速率。

最简实现核心代码示例 #

首先维护视图栈状态：

const viewStack = ref([
  { id: 'home', title: '首页', component: HomeView }
])
// 推入新视图
const pushView = (viewInfo) => {
  viewStack.value.push(viewInfo)
}
// 弹出当前视图
const popView = () => {
  if (viewStack.value.length > 1) {
    viewStack.value.pop()
  }
}

模板部分核心结构：

<v-app-bar>
  <v-btn 
    v-if="viewStack.length > 1" 
    icon="mdi-arrow-left" 
    @click="popView"
  />
  <v-toolbar-title>{{ viewStack.at(-1).title }}</v-toolbar-title>
</v-app-bar>

<v-window v-model="currentIndex">
  <v-window-item 
    v-for="item in viewStack" 
    :key="item.id"
  >
    <component :is="item.component" />
  </v-window-item>
</v-window>

如果是移动端单页应用，也可以直接搭配Vue Router实现视图栈逻辑，不需要自己维护组件实例，只需要监听路由变化维护栈结构即可，适配效果更好。

内容的提问来源于stack exchange，提问作者rollingcodes