如何在 Vue 中嵌套许多 children 的路由？

Question

我有三个主要观点，每个观点都有自己的 mark-up 和独特的内容。计划是这样处理的：

视图 1：用户

列出所有用户，指向每个用户的链接，即视图 2。使用路由器链接，您将转到视图 2。

<router-link v-bind:to="'/user/' + user.id">

视图 2：相册 列出用户的所有相册。 Link按查看带您查看的各相册 3. 我用

从 url 获取 id

data() {
    return {
      id: this.$route.params.id,

这很好用，然后我使用 id 从 API 中获取数据。当我想向下嵌套一个新层以查看 3 (photoView) 时，问题就开始了。在这里我有一个嵌套问题：如果可能的话，我想使用 url like

"/user/:id/albums/:id"

我尝试将路由设置为：

{ path: "/user/:id/albums/:id", component: PhotoView },

并将view2（相册视图）中的router.link改为：

<router-link v-bind:to="'/user/' + id + '/album/' + album.id">
                  <p>{{ album.title }}</p>
                </router-link>

这不起作用。然后我尝试将 photoView 的路径作为 child 放到 albumview，这很有效。

{
    path: "/user/:id",
    component: AlbumView,
    ///
     children: [{ path: "/user/album:id", component: PhotoView }],
  },

但现在有问题。我渲染了两个视图，照片视图只是堆叠在相册视图下......因为我在相册视图中有 <router-view></router-view>

所以我尝试将它们放在一个容器中（以及容器中的routerview），像这样：路由： { 路径：“/用户/”，组件：容器， /// child仁：[ { 路径: "/user/:id", 组件: AlbumView }, { 路径: "/user/album:id", 组件: PhotoView }, ], }, }

这个不行，只能显示相册视图。当我单击每个相册时，它只是按预期设置了 url，但路由不起作用。我做错了什么？解决此问题的最佳解决方案是什么？

I grab the id in both views like this
 data() {
    return {
      id: this.$route.params.id,

Answer 1

当路由到带有路由参数的组件时，会在 $route.params 对象上为每个匹配的参数创建一个属性。

所以如果路由定义中有多个同名参数：id，只有最后一个会存储在$route.params.id 属性中，其他的都会覆盖丢失。

在路由定义中给参数不同的名字：

{
  path: "/user/:idUser/albums/:idAlbum",
  component: PhotoView
},

在组件中访问这些作为：

this.$route.params.idUser
this.$route.params.idAlbum

如何在 Vue 中嵌套许多 children 的路由？

How to nest routing in Vue with many children?

javascript

nested-routes

vue.js

vue-router

vue-component