去除angularjs路由的显眼的#号
在接触到angularj并完成第一个demo后,惊奇地发现居然还可以这样开发前端界面。个人喜欢的一个功能点就是ng的路由功能,可以很好地将视图放入多个文件中。但最基础的使用会给url添加一个显眼的#,因此从网上搜索了很多看到大多的做法是开启html5模式url,示例如下:
angular.module("blogApp", ['ngRoute']) .config(function ($routeProvider, $locationProvider) { $routeProvider.when("/blog/home", { templateUrl: "/page/home.html" }) .when("/blog/article", { templateUrl: "/page/article.html" }) .when("/blog/share", { templateUrl: "/page/share.html" }) .when("/blog/about", { templateUrl: "/page/about.html" }) .otherwise({ redirectTo: "/blog/home" }); $locationProvider.html5Mode(true); });
并在head中添加:<base href="/">,然后就可以使用ng的路由功能了。
但是这样有一个小问题,就是如果进行刷新,这样如果当前url非otherwise指定的地址的话,就会报404错误,这是因为服务端没有对应的页面。或者保存了一个中间的地址,下次要重新使用时也会发生同样的事,所以对于这类的现有的方案就不适用了。因为我后台是使用asp.net mvc所以对这个问题的一个解决方法如下:
1. 首先在routeconfig中配置一条路由,把从前端过来的匹配的url都映射到Home的Index动作中,代码如下:
public class RouteConfig { public static void RegisterRoutes(RouteCollection routes) { routes.IgnoreRoute("{resource}.axd/{*pathInfo}"); routes.MapRoute( name: "BLOG", url: "blog/{*others}", defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional } ); routes.MapRoute( name: "Default", url: "{controller}/{action}/{id}", defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional } ); } }
2. 根据上步,所有刷新操作都会映射到/Home/Index,这样就可以在Index方法中获取实际的请求URL,然后把URL保存到ViewBag中,以供视图中使用,代码如下:
public class HomeController : Controller { public ActionResult Index() { ViewBag.Url = Request.RawUrl; return View(); } }
3. 在ng的控制器中增加currentUrl属性,并通过ViewBag将Url赋给它,然后通过$location.path($scope.currentUrl)来将视图切换到刷新时的路由上,代码如下:
angular.module("blogApp", ['ngRoute']) .config(function ($routeProvider, $locationProvider) { $routeProvider.when("/blog/home", { templateUrl: "/page/home.html" }) .when("/blog/article", { templateUrl: "/page/article.html" }) .when("/blog/share", { templateUrl: "/page/share.html" }) .when("/blog/about", { templateUrl: "/page/about.html" }) .otherwise({ redirectTo: "/blog/home" }); $locationProvider.html5Mode(true); }) .controller("blogCtrl", function ($scope, $route, $location) { $scope.currentUrl = '@ViewBag.Url'; $location.path($scope.currentUrl); $scope.$route = $route; });
以上就是我的解决方案。其他语言框架的都可以使用类似的方式来完成。