Question

我有一个请求添加另一个URL参数，该参数指向我已经设置的状态。为了提高效率，我试图查看是否可以添加多个URL以指向相同的状态，或者我应该只使用$ UrlRouterProvider.when（）方法在这种新情况下重定向到该状态。

实施例。这就是现有的

.state('site.link1',
  {
    url: '/link1',
    templateUrl: '/views/link1.html',
    controller: 'link1Ctrl'
  })

并且要求添加指向link1页面的www.site.com/newlink。有这样的事情吗？

.state('site.link1',
  {
    url: '/link1, /newlink',
    ...

Answer 1

你使用params：

https://github.com/angular-ui/ui-router/wiki/URL-Routing

.state('site.link',
{
    url: '/{link}'
    ..
}

所以当你使用像这样的相同状态时

$state.go('site.link', {link: 'link1'})
$state.go('site.link', {link: 'link2'})

Answer 2

尝试使用正则表达式和网址中的参数。它不是最佳的，但有效。

.state('site.link1',
 {
   url: '/{path:link1|newlink}',
   templateUrl: '/views/link1.html',
   controller: 'link1Ctrl'
 })

More information on regex in Urls

使用ui-sref生成链接，将状态名称作为函数传递给相同的参数

<a ui-sref="site.link1({path:'link1'})" >site link 1</a>
<a ui-sref="site.link1({path:'newlink'})">site new link</a>

Answer 3

您可以使用when()功能

.state('site.link1',
  {
    url: '/link1',
    templateUrl: '/views/link1.html',
    controller: 'link1Ctrl'
  })

然后在root配置

angular.module('myApp', [...])
   .config(function ($urlRouterProvider) {
       $urlRouterProvider.when(/newlink/, ['$state','$match', function ($state, $match) {
           $state.go('site.link1');
       }]);
    });

Answer 4

我发现这种方法非常简单和干净：创建两个相同的状态，只需更改url属性

//Both root and login are the same, but with different url's.
var rootConfig = {
    url: '/',
    templateUrl:'html/authentication/login.html',
    controller: 'authCtrl',
    data: {
        requireLogin: false
    }
}

var loginConfig = Object.create(rootConfig)
loginConfig.url = '/login'

$stateProvider
    .state('root', rootConfig)
    .state('login', loginConfig)

Answer 5

我有几乎相同的问题，只有另一个约束 - 我不想使用重定向，因为我希望浏览器中的url保持不变，但显示相同的状态。
这是因为我希望Chrome保存的密码适用于已保存上一个网址的用户。

在我的情况下，我想要这两个网址：
/gilly和
/new/gilly
两者都指向同一个州。

我通过为/gilly定义了一个状态来解决这个问题，而对于第二个网址，我定义了一个名为/new的抽象状态。

这应该设置如下：

$stateProvider.state('new', {
    abstract: true,
    url: '/new'
    template: '',
    controller: function() { }
}).state('gilly', {
    url: '/gilly',
    template: 'gilly.html',
    controller: 'GillyController'
}).state('new.gilly', {
    url: '/gilly',  // don't add the '/new' prefix here!
    template: 'gilly.html',
    controller: 'GillyController'
});

AngularJs UI路由器 - 一个具有多个URL的状态

5 个答案: