ngRoute 配置路径不能跳转问题

1.原因：AngularJS 版本更新至1.6后对地址做了特别处理。如：<a hret="#/someurl"> 在浏览器中被解析为“#!%2Fsomeurl”,导致路由无法跳转。

解决办法：如果您希望路由中没有哈希前缀，那么可以通过向应用程序添加配置块来恢复以前的行为如下：stackoverflow中的连接

appModule.config(['$locationProvider', function($locationProvider) {

  $locationProvider.hashPrefix('');

}]);

2.ngRoute使用实例（mvc web项目为例子）

一新建ASP.NET Web应用程序（.NET Framework）,进入后选择mvc

二使用nuget包管理安装angular1.6包，并添加文件夹结构如下

在BundleConfig.cs中添加如下代码

    bundles.Add(new ScriptBundle("~/bundles/angular").Include(

                  "~/Scripts/angular.js",

                  "~/Scripts/angular-route.js",

                  "~/Scripts/angular-animate.js"

                ));

            bundles.Add(new ScriptBundle("~/bundles/app").Include(

                "~/App_Myapp/js/app.js"

                ));

在—layout.cshtml中添加如下内容

app.js文件中内容如下：

var app = angular.module('myapp', ['ngRoute', 'ngAnimate']);

app.config(['$locationProvider', function ($locationProvider) {

    $locationProvider.hashPrefix('');

}]);

app.config(['$routeProvider', function ($routeProvider) {

    $routeProvider

        .when('/App_Myapp/Index', {

        controller: 'HomeController',

        templateUrl: '/App_Myapp/views/Index.html'

        })

        .when('/App_Myapp/Table1', {

        controller: 'HomeController',

        templateUrl: '/App_Myapp/views/tables/Table1.html'

        })

        .when('/App_Myapp/Table2', {

            controller: 'HomeController',

            templateUrl: '/App_Myapp/views/tables/Table2.html'

        })

        .otherwise({ redirectTo: '/App_Myapp/Index' });

}]);

app.controller('HomeController', ['$scope', function ($scope) {

    $scope.title = "这是一个AngularJS应用程序";

}]);

点击运行即可

巴特西

ngRoute 配置路径不能跳转问题

最新文章

热门文章