Question

如何避免ui-router中url的＃符号。我可以删除$urlRouterProvider.otherwise('/');它将所有a href="#"重定向到索引页面。请帮助。提前谢谢我的代码在这里。

   routerApp.config(function ($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/');
    $stateProvider
    .state('/', {
        url: '/',
        views: {
            'headertop': {
                templateUrl: 'partials/landingpageheader.html'
            },

            'main': {
                templateUrl: 'partials/landingpage.html',

            }
        }
    })
    .state('home', {
        url: '/home',
        views: {
            'headertop': {
                templateUrl: 'partials/header_top.html',
                controller: 'GoogleSearchCtrl'
            },

            'main': {
                templateUrl: 'partials/homepage.html',
                controller: 'HomePageCtrl'
            }
        }
    })
    .state('chefprofile', {
        url: '/chefprofile/:chef&:itemdate',
        views: {
            'headertop': {
                templateUrl: 'partials/header_top.html'
            },

            'main': {
                templateUrl: 'partials/chefprofile.html',
                controller: 'ChefCtrl'
            }
        }
    })
    .state('aboutus', {
        url: '/aboutus',
        views: {
            'headertop': {
                templateUrl: 'partials/header2.html'
            },

            'main': {
                templateUrl: 'partials/about_us.html',

            }
        }
    })
    .state('register', {
        url: '/register',
        views: {
            'headertop': {
                templateUrl: 'partials/header3.html'
            },

            'main': {
                templateUrl: 'partials/register.html',

            }
        }
    })
    .state('delivery', {
        url: '/delivery_register',
        views: {
            'headertop': {
                templateUrl: 'partials/header3.html'
            },

            'main': {
                templateUrl: 'partials/dlvry_register.html',

            }
        }
    })
    .state('myaccount', {
        url: '/myaccount',
        views: {
            'headertop': {
                templateUrl: 'partials/header3.html'
            },

            'main': {
                templateUrl: 'partials/my_account.html',

            }
        }
    })
    .state('faq', {
        url: '/FAQ',
        views: {
            'headertop': {
                templateUrl: 'partials/headerfaq.html'
            },

            'main': {
                templateUrl: 'partials/faq.html',

            }
        }
    });



});

Answer 1

您应该可以使用位置提供程序中的HTML5模式。

       app.config(["$locationProvider", 
           function($locationProvider) {
                $locationProvider.html5Mode(true);
        }]);

Answer 2

当angular使用兼容模式进行路由时会发生这种情况。这有助于在旧浏览器中进行路由工作，但需要付出代价。 Angular内部使用URL哈希来更改路由，因此您可以在URL中看到这一点。

如果要删除哈希值，并且如果您确定代码将始终在兼容HTML5的浏览器上运行，则可以使用该方法，如答案中的@IamYaman所述。

HTML5方法使用历史记录推送API来更改浏览器的URL。这就是为什么页面没有刷新的原因。

另外，不要忘记在HTML的<base href="/">部分中将基本标记设置为head。您可以在this guide中了解有关它的更多信息。

Answer 3

试试这个

angular.module('yourapp', [
  'ui.router'
])
.config(function($stateProvider, $urlRouterProvider, $locationProvider) {
    $urlRouterProvider.otherwise('/');
    $locationProvider.html5Mode(true);
  });

如何在角度js中使用ui-router路由页面

3 个答案: