Question

我们使用AngularJS版本1.3.16和nodeJS作为后端，ng-route用于角度路由。工作代码由＃组成！作为节点和角度的URL分隔符。

示例网址： /存储/ 1234 /＃！/部门/生产 /存储/ 1234 /＃！/部门/产品/分类/水果

NodeJS路由代码：

    app.get('/store/:storeid', ctrl.storeView);

角度路由代码：

      $routeProvider.when('/department/:deptIndex', {
    controller: 'CartController',
    resolve: {
        // I will cause a 1 second delay
        delay: function ($q, $timeout) {
            var delay = $q.defer();
            $timeout(delay.resolve, 1000);
            return delay.promise;
        }
    }
}).when('/department/:deptIndex/category/:catIndex', {
    controller: 'CartController',
    resolve: {
        // I will cause a 1 second delay
        delay: function ($q, $timeout) {
            var delay = $q.defer();
            $timeout(delay.resolve, 1000);
            return delay.promise;
        }
    }
});
$locationProvider.html5Mode(false).hashPrefix('!');

为了使URL友好且可抓取，我们必须从URL中删除hashbang。因此，当我们尝试启用html5模式时会出现问题。启用模式后，角度路由无效。

Answer 1

您是否在index.html中设置了基本网址？

<head>
  <base href="/">
</head>

您还需要将html5mode设置为true并删除hashPrefix

$locationProvider.html5Mode(true);

Answer 2

每条路线都应该有模板或模板网址，而您的HTML应该有ng-view来查看路线内容

Answer 3

一旦我将基本href更新为节点服务器url：

，我的路由就开始工作了

<head> <base href='/store/'+store.storeCode> </head>

此外，我更新了以商店代码为前缀的角度路线网址，如：

app.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$routeProvider.when('/:storeid/department/:deptIndex', {
    //my routing code
});

angularjs 1.3.16使用html5mode进行路由，url正在更新，但内容未更新

3 个答案: