如何解决ui-sref 生成错误的 url
我正在一个项目中使用 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',300);
return delay.promise;
}
}
}).state('notificationes',{
url: '/user/notification',templateUrl: '/user/notification.html',}).state('review',{
url: '/user/review',templateUrl: '/user/review.html',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',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" 然后在主页面的侧边栏中,当我将侧边栏标签悬停时,它会显示类似 "/用户/用户/预订”、“/用户/用户/评论”。
您可以在下面的屏幕截图中看到。
在 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”。我尝试了很多,但找不到任何解决此问题的方法。请帮我解决这个问题。
解决方法
您不需要在定义的每个状态的 url 的开头添加 /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',300);
return delay.promise;
}
}
这样,您重定向到的每个状态都将采用本地 url
值并将其附加到抽象状态中定义的 /user
。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。