小编bjo*_*orn的帖子

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

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

\n

视图 1:用户

\n

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

\n
<router-link v-bind:to="\'/user/\' + user.id">\n
Run Code Online (Sandbox Code Playgroud)\n

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

\n
data() {\n    return {\n      id: this.$route.params.id,\n
Run Code Online (Sandbox Code Playgroud)\n

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

\n
"/user/:id/albums/:id"\n
Run Code Online (Sandbox Code Playgroud)\n

我尝试将路由设置为:

\n
{ path: "/user/:id/albums/:id", component: PhotoView },\n
Run Code Online (Sandbox Code Playgroud)\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
Run Code Online (Sandbox Code Playgroud)\n

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

\n
{\n    path: "/user/:id",\n    component: AlbumView,\n …
Run Code Online (Sandbox Code Playgroud)

javascript nested-routes vue.js vue-router vue-component

3
推荐指数
1
解决办法
1793
查看次数