angular去掉地址栏#号

最新推荐文章于 2023-07-11 16:33:49 发布

「已注销」

最新推荐文章于 2023-07-11 16:33:49 发布

阅读量3.8k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/Blog_BC/article/details/78111774

本文介绍了如何在AngularJS中启用HTML5模式以移除URL中的#号，包括在AngularJS应用中设置$locationProvider.html5Mode(true)，添加base标签，以及针对不同WebServer（如Tomcat、Nginx、Apache、IIS和Express）的URL转发配置方法。通过UrlRewriteFilter插件或try_files指令实现URL重写，确保页面跳转不会导致404错误。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

AngularJS框架提供了一种HTML5模式的路由，可以直接去掉#号。通过设置$locationProvider.html5Mode(true)就行了。

1.添加base标签

<html lang="zh-CN" ng-app="app"> <head> <base href="/"> //增加base标签 // 省略代码 </head>

2.编辑app.js，增加 $locationProvider.html5Mode(true);

app.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) { $stateProvider ...//省略代码 $locationProvider.html5Mode(true); }]);

3.讲html页面中跳转部分的 ' #/ ' 去掉

例如:<a href="#/detail"></a> 修改为<a href="detal"></a>

4.WebServer地址转发

 
  WebServer地址转发配置根据个人项目选择配置，本人用到的是tomcat，其他没有测试。
  

 
 
  传送门：http://www.cnblogs.com/softidea/archive/2016/07/07/5651421.html

tomcat

这里需要使用到UrlRewriteFilter这个插件，使用方法： 1.将urlrewritefilter-4.0.3.jar包放入应用目录“WEB-INF/lib”下。 2.在WEB-INF/web.xml配置文件中加入：

<filter>
    <filter-name>UrlRewriteFilter</filter-name>
    <filter-class>org.tuckey.web.filters.urlrewrite.UrlRewriteFilter</filter-class> </filter> <filter-mapping> <filter-name>UrlRewriteFilter</filter-name> <url-pattern>/*</url-pattern> <dispatcher>REQUEST</dispatcher> <dispatcher>FORWARD</dispatcher> </filter-mapping>

3.在WEB-INF目录新建“urlrewrite.xml”转发规则文件。内容如下：

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE urlrewrite PUBLIC "-//tuckey.org//DTD UrlRewrite 3.0//EN"
    "http://tuckey.org/res/dtds/urlrewrite3.0.dtd">
<urlrewrite>
   <rule> <from>^/[a-zA-Z]+(/([a-zA-Z]|[0-9])*)*$</from> <to>/index.html</to> </rule> </urlrewrite>

其中rule部分匹配地址用到了正则表达式，这里不赘述。这样就将规则设置完成了，重启tomcat刷新页面，没有#也不会404了。

Nginx

Nginx用到的是try_files，修改nginx的配置文件，增加try_files配置。

server {
    server_name localhost;
    root /www;
    location / {
        try_files $uri $uri/ /index.html; } }

其中root的目录，对应ng-app的定义文件html的目录

Apache

<VirtualHost *:80>
    ServerName localhost

    DocumentRoot /www

    <Directory /www>
        RewriteEngine on # Don't rewrite files or directories RewriteCond %{REQUEST_FILENAME} -f [OR] RewriteCond %{REQUEST_FILENAME} -d RewriteRule ^ - [L] # Rewrite everything else to index.html to allow html5 state links RewriteRule ^ index.html [L] </Directory> </VirtualHost>

IIS

<system.webServer>
  <rewrite>
    <rules> <rule name="Main Rule" stopProcessing="true"> <match url=".*" ></match> <conditions logicalGrouping="MatchAll"> <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" ></add> <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" ></add> </conditions> <action type="Rewrite" url="/" ></action> </rule> </rules> </rewrite> </system.webServer>

Express

var express = require('express');
var app = express();
app.all('/*', function(req, res, next) { // Just send the index.html for other files to support HTML5Mode res.sendFile('index.html', { root: __dirname }); }); app.listen(8080); //the port you want to use

3.WebServer地址转发