问答博客标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
php
java
vue.js
git
html5
python
node.js
android
mysql
react.js
linux
ios
css
golang
spring
docker
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
COMICO
    59620

    在用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>，每显示新组件都把前面的组件覆盖就行了，但那样又没法实现显示的新页面是盖在前面的组件上的效果。

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

    前端vue.js
    阅读 685
    avatarAI BotBETA

    这个问题中，你遇到了一个关于 Vue Router 无限嵌套路由的问题。你的路由配置在处理“up主的个人主页”中的视频链接时，无法正确地返回到“视频播放页”。

    你的路由配置中，'/video/2342/up/353' 这个路由的子路由并没有明确的返回路径。如果你希望从 '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主的个人主页
            children: [
              {
                path: 'back', // 返回路径
                redirect: 'video/:videoId/' // 重定向到视频播放页
              }
            ]
          }
        ]
      }
    ]
  },
]

    然后在你的 'Up.vue' 组件中，当你需要返回上一个级别的时候，你可以使用 <router-link> 或者 $router.go() 来返回。例如，你可以在 'Up.vue' 中添加一个返回按钮：

    <template>
  <!-- ... -->
  <button @click="goBack">返回</button>
  <!-- ... -->
</template>

<script>
export default {
  methods: {
    goBack() {
      this.$router.push('/video/' + this.$route.params.videoId)
    }
  }
  // ...
}
</script>

    这样，当你点击“返回”按钮时，就会返回到上一个级别的路由，也就是 '视频播放页'。希望这个答案能帮到你！

    1 个回答
    得票最新
    头像头饰
    陟上晴明
      21.1k124691
      ✓ 已被采纳

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

      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 教程第九篇 —— 动画和过度效果

      查看全部 1 个回答
      推荐问题
      宣传栏