关于vue 路由 vue-router中嵌套路由中无限嵌套？

  • Z时代
  • 2024-03-03
  • 分类：IT

在用vue仿写B站的组件切换效果。
效果：iphone上B站App中，从B站app首页点击一个视频，进入【视频播放页】，点击【视频播放页】中up主的头像，进入【up主的主页】，然后点击【up主的主页】中的视频，又显示【视频播放页】，然后就可以在【视频播放页】 ⇆ 【up主的主页】之间无限的进行下去。
显示新页面时并没有覆盖前面已显示的页面，而是从右侧滑动显示盖在当前页面上。因此我最初是写成嵌套路由

routes: [
  {
    path: '/', 
    component: () => import('@/views/index.vue'), // B站首页
    children: [
      {
        path: 'video/:videoId/', 
        component: () => import('@/views/Video.vue'), // 视频播放页
        children: [
          {
            path: 'up/:upId', 
            component: () => import('@/views/Up.vue'), // up主的个人主页
          }
        ]
      }
    ]
  },
]

'/' --> B站首页
'/video/2342' --> 视频播放页
'/video/2342/up/353' --> up主的个人主页

问题是，当路由是'/video/2342/up/353'显示了up主的个人主页的个人主页时，我继续点击视频进入视频播放页时的路由该怎么设置呢。从app上的效果来看，似乎是个无限的嵌套路由，可我没法把路由配置成无限进行下去啊。如果不是嵌套路由的话当然好解决了，只用一个<router-view>，每显示新组件都把前面的组件覆盖就行了，但那样又没法实现显示的新页面是盖在前面的组件上的效果。

希望有了解的前辈能提供点思路。

回答：

其实就是一个平级的路由模式，也就是这样的一个路由结构：

routes: [
  {
    path: '/', 
    component: () => import('@/views/index.vue'), // B站首页
    children: [
      {
        path: 'video/:videoId/', 
        component: () => import('@/views/Video.vue'), // 视频播放页
      },
      {
        path: 'up/:upId', 
        component: () => import('@/views/Up.vue'), // up主的个人主页
      }
    ]
  },
]

至于你说的 显示新页面时并没有覆盖前面已显示的页面，而是从右侧滑动显示盖在当前页面上 这块其实就是Vue提供的 Transition 功能，包裹在 <router-view> 组件外部即可。? Transition | Vue.js。

可以多学习一些其他项目的路由设计，Transition 的部分可以在社区里面搜索 “Vue过渡与动画” 这个关键词学习。比如说 ? Vue 教程第九篇 —— 动画和过度效果

以上是 关于vue 路由 vue-router中嵌套路由中无限嵌套？ 的全部内容， 来源链接： utcz.com/p/934992.html

回到顶部