javascript - 如何在 Angular ui 路由器中使最后一个斜杠可选？

Question

我有这样的两种状态:

    $stateProvider.state('app', {
        url: '/app',
        template: '<app-index></app-index>',
        data: {},
        resolve: {}
    });
    $stateProvider.state('app.list', {
        url: '/list/:type?',
        template: '<app-list></app-list>',
        data: {},
        resolve: {}
    })

它工作正常，但是当我输入 url/app/list 时，它会重定向到主页，如何使斜杠可选？我尝试将此网址放入“/list/?:type?”但这没有用。我应该添加重定向吗？如果是，那么如何添加？

Answer 1

我不相信有属性可以做到这一点，但你可以通过设置带有斜杠的子路由来使其工作

.state('app', {
    url: '/app',
    template: '<app-index></app-index>',
})
.state('app.withSlash', {
    url: '/',
})

要在“app”之上添加其他路由，您可以忽略“.withSlash”的存在

.state('app.withOtherParam', {
    url: '/:id',
})

这是一个路由示例，其中斜杠是可选的，并且后面有一个附加参数。

.state('app', {
    url: '/app',
    abstract: true,
    template: '<ui-view/>',
})
.state('app.specificPage', {
    url: '/',
    template: '<someTemplate>'
})
.state('app.withId', {
    url: '/:id',
    template: '<someTemplate>',
})
.state('app.withId.withSlash', {
    url: '/',
})