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

【问题标题】：AngularJs UI router - one state with multiple URLsAngularJs UI 路由器 - 具有多个 URL 的一种状态
【发布时间】：2015-01-25 15:41:08
【问题描述】：

我请求添加另一个指向我已经设置的状态的 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',
    ...

【问题讨论】：

目前您必须多次使用 .when 或定义状态，使用不同的 url...有一些方法：stackoverflow.com/a/23853129/1679310
如果唯一的改变是 stateParams，你可以用相同的路线逃脱，只是传递空参数，唯一不那么优雅的是你会有一个“//”在你的网址。如果规范定义了一个完全不同的 url，那么需要一个新的状态
如果同一状态下的 2 个不同的参数值重定向到这些不同的 ursl，那么您可以使用 templateurl 作为函数，您可以将第一个参数作为 routeparam 并相应地返回 url。但目前还不清楚您到底想做什么。

标签： angularjs routing

【解决方案1】：

你使用参数：

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'})

【讨论】：

我很好奇，您在提供的链接中从哪里看到这样的示例？
链接显示文档，它使用contacts.details。我只是用这个例子来展示如何使用“go”函数来改变状态。

【解决方案2】：

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

.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>

【讨论】：

【解决方案3】：

你可以使用when()函数

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

然后在根配置上

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

【讨论】：

【解决方案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)

【讨论】：

嗯，这个例子不就是两个州吗？是否存在我们可以覆盖该州的url 选项的实例？所以，最后，将只有一种状态。谢谢。

【解决方案5】：

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

就我而言，我想要这两个网址：
/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'
});

【讨论】：