AngularJs去掉链接中的“#”

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

摸路

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

阅读量1.4k

点赞数

分类专栏： AngularJs

本文链接：https://blog.youkuaiyun.com/qq_27868533/article/details/78971722

版权

10 篇文章

订阅专栏

本文介绍如何在AngularJS项目中使用html5Mode去除URL中的#号，并通过配置WebServer解决404问题。

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

angularjs的路由机制会给链接中添加一个“#”，是跳到子页面的锚点。由于项目需求，需要将链接中的“#”去掉，其实angular还提供了html5Mode()跳转机制。

angular.module("app",["ui.router"])
    .config(function($locationProvider){
        $locationProvider.html5Mode(true);
    })

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

其实前两步的设置已经可以实现去掉“#”跳转了，但是每次刷新或者直接输链接进到页面都会报找不到页面的错

这是由于WebServer的没有各个子页面的路由，所以报找不到的错误，让WebServer把属于AngularJS管理的路由URL，都发转到ng-app就可以解决404的问题了

一般情况下，现在很多前端的编译器都自带webserver，很多前端小伙伴都没有自己搭过webserver，所以多说一点修改webserver的配置问题。

a. nginx下载安装

在nginx官方网站下载，下载好只好解压到任意位置，比如桌面的nginx文件夹中，直接cmd

cd C:\Users\admin\Desktop\nginx

进入解压的文件夹下

start nginx

打开浏览器输入localhost直接到nginx欢迎界面，说明webserver已经启动

b.接下来就是把自己的项目添加到服务器下

其实很简单，把自己项目放到nginx文件加下的html里，index.html覆盖原来的index.html就好。

c.修改 nginx 配置为 webserver 路径配置

打开nginx.conf,在http{}下第一个server的location / {} 下的index替换掉，替换为

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

然后重新加载服务

nginx -s reload

浏览器刷新不会再出现找不到页面的问题了。