Question

我在AngularJS中使用ui-router面临网址结构问题。我想拥有这样的第一级SEO友好网址结构：

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友好的第一级网址链接。 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但实际上并非如此。

那么我如何构建我的app ui-router结构以获得像https://people-profile.com/mike-david-tringe这样的SEO友好网址，但是当网址为https://people-profile.com/admin/时，它会加载admin.html模板并使用AdminController而不是我定义的$ stateProvider？

Answer 1

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

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

如何构建ui-router以拥有SEO友好的url结构

1 个答案: