Question

我遇到了一个非常奇怪的错误。我的UI-Router使用主页模板中的ui-view元素进行如下设置。

.state('main.home.one', {
    url: '/',
    templateUrl: 'partials/home/one',
    controller: "OneCtrl"
})
.state('main.home.two', {
    url: '/two/',
    templateUrl: 'partials/home/two',
    controller: "TwoCtrl",
})

当我使用main.home.one从main.home.two导航到$state.go()时，它可以正常工作
当我使用url / two从main.home.one导航到main.home.two时它不起作用，当它从服务器成功调用模板时，它会加载！ - uiView：undefined -
如果我将网址从'/two'更改为'/two/'，则按网址导航时工作正常
只有ui-view元素有效，<div ui-view>中的属性无效

我的目标是加载状态参数："/two/:id"当然会破坏事物。如果有人能够对这个问题有所了解，我将非常感激。

Answer 1

尾随斜杠是使用UI路由器的路由的重要部分。查看this section of the FAQ on making trailing slashes optional，希望这会有所帮助！

编辑：链接中的相关代码

如何：为所有路线设置一个尾随斜线

当网址包含尾部斜杠时，如何激活我的路由？

在配置块中将strictMode设置为false：

$urlMatcherFactoryProvider.strictMode(false)

对于旧版本的ui-router，请将此代码段添加到模块的配置功能中。它在$ urlRouterProvider上创建一个规则，该规则将所有缺少尾部斜杠的URL映射到同一个URL，但附加了尾部斜杠。

如果您使用此方法，则需要使用尾部斜杠指定所有网址。

$urlRouterProvider.rule(function ($injector, $location) {
    var path = $location.url();

    // check to see if the path already has a slash where it should be
    if (path[path.length - 1] === '/' || path.indexOf('/?') > -1) {
        return;
    }

    if (path.indexOf('?') > -1) {
        return path.replace('?', '/?');
    }

    return path + '/';
});

注意：必须使用尾随/重新定义app / scripts / app.js中的所有路由。这意味着诸如/ things /：id之类的路由也会成为/ things /：id /。

Answer 2

将子模板插入到父模板中。好像您的main.home州没有模板（或模板没有ui-view元素）。将以下内容添加到路径配置中：

＆＃13;

.state('main.home', {
    template: '<ui-view />',
})

＆＃13;

Angular UI-Router不显示模板

2 个答案: