angularjs中URL中的#號問題,$locationProvider.html5Mode(true)刷新404


解決辦法原文地址: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進行路由管理.


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM