AngularJS开启html5Mode(true)后URL变化但视图未更新

我来帮你排查一下这个问题，这种情况在AngularJS开启HTML5模式时挺常见的，咱们一步步来解决：

1. 完善路由配置，确保html5Mode正确启用 #

你目前的代码只初始化了模块，但缺少完整的路由配置。要让HTML5模式正常工作，必须在路由配置里明确开启html5Mode，同时配置对应的路由规则：

var portfolioApp = angular.module('portfolioApp', ['ngRoute']);

portfolioApp.config(function($routeProvider, $locationProvider) {
    // 配置路由映射：URL对应视图和控制器
    $routeProvider
        .when('/about', {
            templateUrl: 'views/about.html', // 替换成你实际的视图文件路径
            controller: 'sectionController'
        })
        // 可以添加其他路由规则，比如首页
        .when('/', {
            templateUrl: 'views/home.html',
            controller: 'homeController'
        })
        // 处理未匹配的路由
        .otherwise({
            redirectTo: '/'
        });

    // 开启HTML5模式，与页面中的<base href="/">对应
    $locationProvider.html5Mode({
        enabled: true,
        requireBase: true // 默认值为true，和你页面里的base标签匹配即可
    });
});

2. 用ng-href替代普通href #

AngularJS需要拦截路由跳转事件，如果你用普通的href，浏览器会直接发起页面跳转，而不是让Angular的路由系统处理，这就会导致URL变化但视图不更新。把你的链接改成：

<li ng-repeat="navName in navNames">
    <a ng-href="/{{navName.path}}">{{navName.name}}</a>
</li>

假设你的navNames数组是类似这样的结构（如果路径固定也可以直接写ng-href="/about"）：

portfolioApp.controller('sectionController', function($scope) {
    $scope.navNames = [
        {name: 'About', path: 'about'},
        {name: 'Home', path: ''}
        // 其他导航项
    ];
});

3. 配置服务器端重定向（关键！） #

HTML5模式下，当用户直接访问/about或者刷新页面时，浏览器会向服务器请求这个路径，但服务器上并没有名为about的文件，所以会返回404。必须配置服务器把所有路由请求重定向到index.html，让AngularJS来处理路由：

Apache（.htaccess文件） #

RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]

Nginx（server配置块） #

location / {
    try_files $uri $uri/ /index.html;
}

Node.js Express #

const path = require('path');
app.get('*', function(req, res) {
    res.sendFile(path.join(__dirname, 'public/index.html')); // 替换成你的index.html路径
});

4. 检查控制器与视图的关联 #

确保你的sectionController已经正确注册，并且路由中指定的templateUrl路径是正确的。如果视图文件不存在或者路径错误，也会导致视图无法更新。

内容的提问来源于stack exchange，提问作者Struse