AngularJS对URL路由的更改

我们有一个网站，当前的路由设置为site.com/products/:id，因此示例URL可能是site.com/products/104。我们不再需要网址中的ID，而是希望改为实际的产品名称。所以我们希望它作为site.com/products/produc-nameAngularJS对URL路由的更改

我们将如何去做这个改变？我们正在使用ui-router。我不确定需要什么其他信息，所以请提问。寻求任何指导，你可以给。谢谢。

路由器是：

.module('app', ['ui.router', 'ngCookies', 'ngSanitize', 'ngTouch']) 
 
      .config(config) 
 
      .run(run); 
 
    config.$inject = ['$stateProvider', '$urlRouterProvider', '$authProvider', '$locationProvider']; 
 
    function config($stateProvider, $urlRouterProvider, $authProvider, $locationProvider) { 
 
     $stateProvider 
 
       .state('home', { 
 
        url: '/', 
 
        controller: 'HomeController', 
 
        templateUrl: 'app/components/home/home.html', 
 
        resolve: { 
 
         alreadyLoggedIn: alreadyLoggedIn 
 
        } 
 
       }) 
 
       .state('product', { 
 
        url: '/product/:id', 
 
        controller: 'ProductController', 
 
        title: "Product", 
 
        templateUrl: 'app/components/product/product.html', 
 
        controllerAs: 'vm' 
 
       })

然后调用产品，我们使用

<a ng-href="/#/product/{{::value.id}}">

来源

2017-07-17 doctorbighead

只要您的产品名称都是唯一的，它应该是一个简单的更改。如果没有设置路由的代码和创建链接的代码，没有人能够为您提供很大的帮助。 –

谢谢，编辑了原始问题以包含代码示例，希望就够了。 – doctorbighead

因此，基本上，你需要做3件事。

1）改变你的产品状态，以类似

.state('product', { 
    url: '/product/:productName', 
    controller: 'ProductController', 
    title: "Product", 
    templateUrl: 'app/components/product/product.html', 
    controllerAs: 'vm' 
    })

2）改变你的HREF为类似

<a ng-href="/#/product/{{::value.productName}}">

3）变更ProductController的名字，而不是ID，以寻找您的产品。

显然，如果productName字段实际上不是productName，则必须相应地进行调整。

来源

2017-07-17 21:06:00

非常感谢，我不知道为什么我要找更复杂的东西 - 这解决了我的问题，很好！ – doctorbighead

AngularJS对URL路由的更改

回答

相关问题