ui-sref 生成错误的 url

Question

我正在一个项目中使用 Angularjs 和 Nodejs。我在我的项目中使用 UI-router 进行路由。 以下是我的应用模块文件中的状态配置：

app.config(function ($stateProvider, $urlRouterProvider) {

$stateProvider.state('booking', {
    url: '/user/booking',
    templateUrl: '/user/booking.html',
    resolve: {
        delay: function ($q, $timeout) {
            var delay = $q.defer();
            $timeout(delay.resolve, 300);
            return delay.promise;
        }
    }
}).state('bookingDetails', {
    url: '/user/bookingDetails',
    templateUrl: '/user/bookingDetails.html',
    resolve: {
        delay: function ($q, $timeout) {
            var delay = $q.defer();
            $timeout(delay.resolve, 300);
            return delay.promise;
        }
    }
}).state('notificationes', {
    url: '/user/notification',
    templateUrl: '/user/notification.html',
}).state('review', {
    url: '/user/review',
    templateUrl: '/user/review.html',
    resolve: {
        delay: function ($q, $timeout) {
            var delay = $q.defer();
            $timeout(delay.resolve, 300);
            return delay.promise;
        }
    }
}).state('promo', {
    url: '/user/promoCode',
    templateUrl: '/user/promoCode.html'
}).state('setting', {
    url: '/user/setting',
    templateUrl: '/user/setting.html'
}).state('setting.personalInfo', {
    url: '/personalInfo',
    templateUrl: '/user/personalInfo.html',
   resolve: {
       delay: function ($q, $timeout) {
           var delay = $q.defer();
           $timeout(delay.resolve, 300);
           return delay.promise;
       }
   }
}).state('setting.changePassword', {
    url: '/changePassword',
    templateUrl: '/user/changePassword.html',
   resolve: {
       delay: function ($q, $timeout) {
           var delay = $q.defer();
           $timeout(delay.resolve, 300);
           return delay.promise;
       }
   }
}).state('setting.notificationPre', {
    url: '/notificationPreferences',
    templateUrl: '/user/notificationPreferences.html'
}).state('setting.changeAvatar', {
    url: '/changeAvatar',
    templateUrl: '/user/changeAvatar.html'
});

});

当我点击 URL "localhost:3000/user/booking" 然后在主页面的侧边栏上，当我将侧边栏选项卡悬停时，它会显示像 "/ 这样的 URL用户/用户/预订”、“/用户/用户/评论”。

您可以在下面的屏幕截图中看到。

在 sidebar.html 文件中使用 ui-sref

<li class="nav-item  " ui-sref-active="active">
            <a ui-sref="review" class="nav-link nav-toggle">
                <i class="icon-star"></i>
                <span class="title">Review</span>
            </a>

        </li>

我陷入了困境，不明白为什么它会重复“/user”。我尝试了很多，但找不到任何解决此问题的方法。请帮我解决这个问题。

Answer 1

您无需在您定义的每个州的网址开头添加/user。

而是创建一个抽象状态（例如，将其命名为 main 或任何适合您的套件）并为其提供 /user url 并让所有其他用户状态扩展它

例如

$stateProvider
.state('main', {
    'abstract': true,
    url: '/user'
.state('main.booking', {
    url: '/booking',
    templateUrl: '/user/booking.html',
    resolve: {
        delay: function ($q, $timeout) {
            var delay = $q.defer();
            $timeout(delay.resolve, 300);
            return delay.promise;
        }
    }
})
.state('main.bookingDetails', {
    url: '/bookingDetails',
    templateUrl: '/user/bookingDetails.html',
    resolve: {
        delay: function ($q, $timeout) {
            var delay = $q.defer();
            $timeout(delay.resolve, 300);
            return delay.promise;
        }
    }

这样，您重定向到的每个状态都将采用本地 url 值并将其附加到抽象状态中定义的 /user。