如何构建 ui-router 以具有 SEO 友好的 url 结构答案

【问题标题】：How to structure ui-router to have SEO friendly url structure如何构建 ui-router 以具有 SEO 友好的 url 结构
【发布时间】：2015-11-24 07:24:10
【问题描述】：

我在 AngularJS 中使用 ui-router 时遇到 url 结构问题。我想拥有像这样的一级 SEO 友好 url 结构：

https://people-profile.com/mike-david-tringe

所以我可以通过 stateParam 获取 SEO 名称“mike-david-tringe”，并使用它在数据库中查找数据并填充页面。 $stateProvider 的代码如下：

$stateProvider
    .state('people', {
        url: '/:nameUrl',
        templateUrl: 'app/frontend/page.tmpl.html',
        params: { 
            nameUrl: {squash: true},
        },
        controller: "PageController",
        controllerAs: 'vm'
    })
   .state('admin', {
        url:'/admin/:userId',
        templateUrl:'app/frontend/admin/admin.html',
        controller:'AdminController',
        controllerAs: 'admin'
   })

使用上面的代码，我可以让https://people-profile.com/mike-david-tringe 与 nameUrl = mike-david-tringe 一起工作，并且我获得了 SEO 友好的一级 url 链接。 mike-david-tringe 是 SEO 友好的，也是域名旁边最重要的关键字。

但是使用这种结构，https://people-profile.com/admin/ 或 https://people-profile.com/login/ 现在将无法工作。由于我的控制器尝试将 admin 作为 nameUrl 并查找数据。并且 admin 不是 nameUrl，所以我的数据库将返回 null，应用程序将失败。

简而言之，stateParam nameUrl 会抓取“/”之后的任何内容，因此 url 设置会认为 admin 和 login 是 :nameUrl 但实际上并非如此。

那么我如何构建我的应用程序 ui-router 结构以具有像 https://people-profile.com/mike-david-tringe 这样的 SEO 友好 url 但是当 url 是 https://people-profile.com/admin/ 时，它将加载 admin.html 模板并使用我在 $stateProvider 中定义的 AdminController？

【问题讨论】：

标签： angularjs seo angular-ui-router url-routing

【解决方案1】：

您需要做的就是交换它们的顺序。路由器将按定义顺序检查，因此如果 /:nameUrl 位于 /admin 之前，它将首先触发。但是如果你把 /:nameUrl 放在最后，那么它将触发任何尚未触发上述内容的 url。

不过，请注意。在触发相同状态的两个 url 之间移动（例如在您的情况下都命中 /:nameUrl 的两个 url）不会重新加载页面上的控制器。只有改变状态才能做到这一点。有一些选项可以改变这种行为，但它对我来说一直很麻烦。

【讨论】：