如何构造 ui-router 以获得 SEO 友好的 url 结构

Question

我在 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 link。 mike-david-tringe 是 SEO 友好的，也是域名旁边最重要的关键字。

但是有了这个结构，https://people-profile.com/admin/ or https://people-profile.com/login/现在就不行了。由于我的控制器尝试将 admin 作为 nameUrl 并寻找数据。 admin 不是 nameUrl，所以我的数据库将 return null，应用程序将失败。

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

那么我该如何构造我的应用程序 ui-router 结构来使 SEO 友好 url 就像 https://people-profile.com/mike-david-tringe 但是当 url 是 https： //people-profile.com/admin/，它将加载 admin.html 模板并使用 AdminController 而不是我在 $stateProvider 中定义的？

Answer 1

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

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

如何构造 ui-router 以获得 SEO 友好的 url 结构

How to structure ui-router to have SEO friendly url structure

seo

url-routing

angularjs

angular-ui-router