如何通过DeepLink导航多层嵌套页面并构建聊天页面栈

方案1：嵌套路由直接跳转 #

先把路由结构配置成嵌套层级，让Home作为父路由，Chats（底部导航标签页）作为其子路由，Chat再作为Chats的子路由：

// 路由配置示例
const routes = [
  {
    path: '/home',
    component: Home,
    children: [
      {
        path: 'chats',
        component: Chats,
        children: [
          { path: 'chat/:chat_id', component: Chat }
        ]
      }
      // 其他底部导航标签页的路由配置
    ]
  }
]

配置完成后，直接用router.push("/home/chats/chat/:chat_id")就能一次性构建出Home -> Chats -> Chat的页面层级，同时Home的底部导航会自动匹配到Chats标签（因为路由路径命中了/home/chats）。

方案2：手动拼接路由栈（非嵌套路由场景） #

如果你的页面不是嵌套结构，可通过两次路由操作构建层级：

• 第一步：用router.replace将当前栈替换为Home页面，同时通过查询参数传递要激活的标签页：

  router.replace({ path: '/home', query: { activeTab: 'chats' } })
  

• 第二步：紧接着push目标Chat页面：

  router.push({ path: `/chat/${chatId}`, params: { chat_id: chatId } })
  

• 在Home页面的初始化钩子（比如onMounted）中，读取activeTab参数，自动切换底部导航到Chats标签。

方案3：路由State传递激活状态 #

跳转时通过路由的state参数传递标签页激活指令：

router.push({
  path: `/home/chats/chat/${chatId}`,
  state: { activeTab: 'chats' }
})

在Home页面中监听路由的state变化，自动把底部导航的选中项设置为Chats。

内容的提问来源于stack exchange，提问作者Александр Кислинский