AngularJS ui-router刷新页面跳转至默认页问题咨询

嘿，我来帮你搞定这个刷新页面就跳回首页的麻烦！

首先咱们得搞清楚问题出在哪：你用的是AngularJS的ui-router，但你的Contact状态没有配置url属性，而且单页应用刷新时，浏览器会直接向服务器请求当前URL，如果服务器没做对应的 fallback 配置，就会找不到资源，最后被$urlRouterProvider.otherwise('/')导向默认页。

两步解决问题： #

1. 给Contact状态添加专属URL

修改你的路由配置，给Contact状态加上url字段，这样刷新时浏览器的URL能匹配到这个状态：

app.config(function ($stateProvider, $urlRouterProvider) { 
  $stateProvider 
    .state('Contact', { 
      url: '/contact', // 新增：给Contact状态分配URL路径
      templateUrl: '../Homepages/HomeScripting/HomeContact.html', 
      controller: 'abc' 
    }) 
    .state('root', { 
      url: '/', 
      template: '<b>This is Home</b>' 
    }); 
  $urlRouterProvider.otherwise('/');
});

2. 配置服务器端Fallback（关键！）

单页应用的核心是所有路由都由前端接管，所以刷新时服务器需要把所有非静态文件的请求都转发到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服务器：在站点配置里添加：

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

这样设置之后，刷新页面时，服务器会返回index.html，AngularJS就能根据URL匹配到对应的Contact状态，不会再跳回默认页啦！

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