如何使用 UI-Router 定义可选参数而没有尾部斜杠? [英] How to define optional parameter using UI-Router without trailing slash as well?
问题描述
我正在将我的 Angularjs 代码从 ng-router 迁移到 UI-Router.在我的 ng-router 中,我有可选参数,但是我意识到 ui-router 不支持同样简单的方法来支持可选参数.以下是我现有的 ng-router 模块中的路由.
I was working on migration of my Angularjs code from ng-router to UI-Router. In my ng-router I have optional parameters however I realized that same easy way to support optional parameter is not supported in ui-router. Following is my routes from my existing ng-router module.
//Define routes for view using ng-router
$routeProvider.
when('/my-app/home/:userid?', {
templateUrl: '/templates/partials/home/HomeView.html',
controller: 'HomeViewController'
})
.when('/my-app/:productKey/:userid?', {
templateUrl: '/templates/partials/productpage/ProductPageView.html',
controller: 'ProductViewController'
})
.otherwise({redirectTo: '/my-app/home'});
注意:如果你看到 ":userid" 参数在这里被非常顺利地实现为可选.
Note: If you see ":userid" parameter is very smoothly implemented here as optional.
我尝试在 ui-router 中跟随,但同样不起作用.我已经浏览了很多帖子,并建议复制路线.我真的不想复制,因为它会使代码变脏.
I tried following in ui-router however same is not working. I have gone through many post and it was suggested to duplicate the routes. I really don't want to duplicate as it will make code dirty.
//Set the default route
$urlRouterProvider.otherwise('/my-app/home');
//Define routes for view (Please make sure the most matched pattern is define at top)
$stateProvider
.state('viewallcards', {
url: '/my-app/home/:userid',
templateUrl: '/templates/partials/home/HomeView.html',
controller: 'HomeViewController'
})
.state('productpage', {
url: '/my-app/:productKey/:userid',
templateUrl: '/templates/partials/productpage/ProductPageView.html',
controller: 'ProductViewController'
});
此处/my-app/home/有效,但/my-app/home 无效.如何在没有斜杠的情况下制作它?
Here /my-app/home/ works however /my-app/home doesn't work. How to make it without trailing slash as well?
关于同一问题的后续帖子也让我惊讶地发现 ui-router 不支持此功能.它仍然有效吗?请帮忙.
Also following post on same issue has surprised to me to know that this is not supported in ui-router. Is it still valid? Please help.
推荐答案
有 一个工作示例
我们可以使用 params : {}
对象来定义 userid
完全符合我们的需要(即准备好省略).
We can use params : {}
object to define the userid
exactly as we need (i.e. ready to be omitted).
在此处查看有关 params
的更多详细信息:
Check more details about params
here:
$stateProvider
.state('viewallcards', {
url: '/my-app/home/:userid',
params: {
userid: {squash: true, value: null }, // this will make both links below working:
// #/my-app/home
// #/my-app/home/
},
...
})
.state('productpage', {
url: '/my-app/:productKey/:userid',
...
})
检查它在此操作
这篇关于如何使用 UI-Router 定义可选参数而没有尾部斜杠?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!