angularjs中URL中的#号问题,$locationProvider.html5Mode(true)刷新404

最新推荐文章于 2021-06-30 17:21:24 发布

weixin_30458043

最新推荐文章于 2021-06-30 17:21:24 发布

阅读量264

点赞数

文章标签：运维 javascript ViewUI

原文链接：http://www.cnblogs.com/xuepei/p/9584823.html

版权

解决办法原文地址：https://blog.csdn.net/weixin_36185028/article/details/72179568

angularjs支持两种url模式，hash模式和html5模式

默认是hash模式，在hash模式下url中有#，例如：http://localhost:9090/#/cases/all

html5模式下url中是没有#的，

如何设置html5模式呢？

$locationProvider.html5Mode(true);

这样设置之后url中确实是没有#号了，但又有一个新的问题出现了：从http://localhost:8000/view1 跳转到http://localhost:8000/view2 时一切正常，当刷新view1页面或者直接输入url地址http://localhost:8000/view1 后会出现404问题，那么这个问题该如何解决呢？

解决办法原文地址：https://blog.csdn.net/weixin_36185028/article/details/72179568

1、app.js中设置$locationProvider.html5Mode(true);

2、index.html页面中<head></head>元素内添加标签<base href="/">

3、静态网站

编辑nginx的配置文件nginx.conf，增加try_files配置。

// nginx.conf配置
server {
        set $htdocs /www/deploy/mysite/onbook;
        listen 80;
        server_name onbook.me;
        location / {
            root $htdocs;
            try_files $uri $uri/ /index.html =404;
        }
}

动态网站

动态网站，一般不是通过Nginx直接路由，而是通过Web服务器管理路由。假设我们使用的是Node.js的Express的Web框架。打开Express框架的路由访问控制文件server.js，增加路由配置。

app.use(function (req, res) {
    console.log(req.path);
    if(req.path.indexOf('/api')>=0){
        res.send("server text");
 
    }else{ //angular启动页
        res.sendfile('app/index.html');
    }
});

设置当站内路径(req.path) 不包括 /api 时，都转发到 AngularJS的ng-app(index.html)。所以，我们再直接访问地址 (http://onbook.me/book)时，/book 不包括 /api，就会被直接转发到AngularJS进行路由管理.

转载于:https://www.cnblogs.com/xuepei/p/9584823.html

weixin_30458043

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
angularjs中URL中的#号问题,$locationProvider.html5Mode(true)刷新404

解决办法原文地址：https://blog.csdn.net/weixin_36185028/article/details/72179568angularjs支持两种url模式，hash模式和html5模式默认是hash模式，在hash模式下url中有#，例如：http://localhost:9090/#/cases/allhtml5模式下url中是没有#的，如何设置html5...
复制链接

扫一扫