如何在具有多个孩子的 Vue 中嵌套路由？

Question

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

\n

视图 1：用户

\n

列出所有用户，链接到每个用户，即视图 2。使用 routerlink 可以转到视图 2。

\n

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

\n

视图 2：相册\n列出用户的所有相册。链接到按查看每个专辑，这将带您查看 3。\n我从 url 中获取 id

\n

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

\n

这工作正常，然后我使用 id 从 API 获取数据。\n当我想向下嵌套一个新图层以查看 3 (photoView) 时，问题就开始了。\n这里我遇到嵌套问题：\n如果可能的话我想要使用像这样的网址

\n

"/user/:id/albums/:id"\n

\n

我尝试将路由设置为：

\n

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

\n

view2 (albumview) 中的 router.link 为：

\n

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

\n

\xc2\xb4t 不起作用。\n然后我尝试将 photoView 的路径作为相册视图的子项，这有效。

\n

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

\n

但现在有问题。我渲染两个视图，照片视图只是堆叠在 albumview\xe2\x80\xa6 下，因为我在 albumview 中有<router-view></router-view>

\n

所以我尝试将它们放入容器中（以及容器中的routerview），如下所示：\n路由：\n{\n路径：“/user/”，\n组件：容器，\n///\n子项：[\ n{ 路径: "/user/:id", 组件: AlbumView },\n{ 路径: "/user/album:id", 组件: PhotoView },\n],\n},\n}\n

\n

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

\n

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

\n

Answer 1

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

因此，如果路由定义中有多个具有相同名称的参数：id，则只有最后一个参数会存储在$route.params.id属性中，其他参数将被覆盖并丢失。

在路由定义中为参数指定不同的名称：

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

在组件中访问这些内容如下：

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