Question

我正在尝试在spa上实现路由，该spa仅根据在主VUE实例上设置true / false属性来交换组件。我正在使用VUE.JS 2的官方Vue路由器

有一个组件，我将其路由到以下路径：

  {
    path: '/Foe/Bar/Details/:id',
    components: {
        layerTop: 'barDetail',
        layerMiddle: notImportant
    },
    props: { layerTop: true }
},

因此，当用户点击详细信息按钮时，我的组件会按预期加载。我的问题是当我尝试从这条路线导航到一条新路线但我想保留我当前命名的'layerTop'路由器视图。基本上我不想改变'layerTop'视图，只需要更改layerMiddle视图。所以我认为我的路径看起来像这样：

path: 'Foe/Bar/Details/:barId/Categories/:categoryId

但我不知道如何将barId param映射到Bar组件的prop，将categoryId映射到Category comp的prop。

当它是单个参数时，它就像上面的例子一样工作。我对Vue和路由器很陌生，特别试图在文档上找到一个例子，但不能。感谢您的任何意见。

Answer 1

查看嵌套路线文档。

https://router.vuejs.org/en/essentials/nested-routes.html

routes: [
    {path: "/foo/bar". component: FooBar,
        children [
            path: "/:id", component: FooBarDetails,
                 children: [ 
                     {path: "categories/:categoryid", component: Category}
                 ]
        ]
    }
 ]

VueJS在网址

1 个答案: