angularJS去掉路由url里的#号
首页 >  Web前端 > AngularJS  > 2017年11月28日阅(1237)评(1
AngularJS框架定义了自己的前端路由控制器,通过不同URL实现单面(ng-app)对视图(ng-view)的部署刷新,并支持HTML5的历史记录功能。默认状态下,是不启动HTML5模式的,此时URL中会包含一个#号,用来区别是AngularJS管理的路径还是WebServer管理的路径。

某些情况下,#号并不不太友好。比如美观度,还有有的地方不支持这种带#号的URL。下面记录下去掉#号的方法:

1.入口文件index.html中增加<base>标签

<!DOCTYPE html>
<html>
<head>
<base href="/">
...我是省略部分...

2.开启html5Mode

angular.module('myApp')
.config(['$locationProvider',function($locationProvider){
	$locationProvider.html5Mode(true);
	//...
}]);

3.服务端处理

如果不这样做,页面刷新后会报404,因为刷新请求的是WebServer管理的路径,脱离了AngularJS管理的路径。

a.nginx的配置

配置文件nginx.conf,增加try_files配置

server
{
	#......
	location / {
		#......
		try_files $uri $uri/ /index.html =404;
		#......
	}
	#......
}

b.apache的配置

.htaccess文件中

<IfModule mod_rewrite.c>
RewriteEngine On
	RewriteCond %{REQUEST_FILENAME} !-f
	RewriteCond %{REQUEST_FILENAME} !-d
	RewriteBase /
	RewriteRule . /index.html [L]
</IfModule>

c.Node.js的配置

还没用到。。。哈哈!

相关资料

官方文档之$locationProvider

AngularJS去掉URL里的#号

JavaScript的隐式转换和显式转换
angularJS之$location服务

有朋自远方来...评论一下呗O(∩_∩)O哈哈~

QQ
昵称*
邮箱*
主页

评论(1)

1楼、天津网站建设 [回复该留言]
2018-10-15 17:02
感谢分享