Angular URL路由问题答案

【问题标题】：Angular URL routing issueAngular URL路由问题
【发布时间】：2017-02-10 20:30:22
【问题描述】：

所以我需要更改我的网址，以便谷歌分析可以跟踪它。谷歌分析不会接受链接中带有“/#/”（哈希）的它。也就是说，我使用了 Angular 的 locationProvider 并修改了我的应用路由：

(function() {
  'use strict';

  angular
    .module('mbapp')
    .config(routerConfig);

  /** @ngInject */
  function routerConfig($stateProvider, $urlRouterProvider, $locationProvider) {
    $stateProvider
      .state('home', {
        url: '/',
        templateUrl: 'app/main/main.html',
        controller: 'MainController',
        controllerAs: 'main'
      });

    $stateProvider
      .state('steps', {
        url: '/steps',
        templateUrl: 'app/steps/steps.html',
        controller: 'StepsController',
        controllerAs: 'steps'
      });      

    // use the HTML5 History API
    $locationProvider.html5Mode(true);      

    $urlRouterProvider.otherwise('/');
  }

})();

我的 URL 很好，将其更改为 http://website.com/steps 而不是 http://website.com/#/steps。但是，现在，如果用户刷新 (f5) 链接，则会引发 404 错误并且不确定原因。此外，当刷新被称为“http://website/steps#/steps”时，它似乎以某种方式作为 URL 被注入。

对此有什么想法吗？

非常感谢。

【问题讨论】：

我遇到了同样的问题要解决它我更新了分析 onpagechange 就像这个stackoverflow.com/questions/12989106/…中的建议一样@
周围的几个角度分析模块......我自己在基于哈希的路由方面没有遇到这个问题，并且还实时监控了 ga 流量
@AsafHananel - 你的意思是“_trackPageview”吗？

标签： angularjs url routing

【解决方案1】：

问题可能出在服务器端。您必须配置您的服务器，以便它使用您的 html 文件响应每个请求。例如在快递中：

var app = require('express')();

app.configure(function(){
  // static - all our js, css, images, etc go into the assets path
  app.use('/assets', express.static('/assets'));

  app.get('/api/users/:id', function(req, res){
    // return data for user....
  });

  // This route deals enables HTML5Mode by forwarding missing files to the index.html
  app.all('/*', function(req, res) {
    res.sendfile('index.html');
  });
});

当您重新加载页面时，请求会转到应用程序的服务器端，它会尝试解析 url，但可能无法解析，因为这些路由仅存在于应用程序的客户端。

此外，最好为每个服务器端路由添加 /api 路由前缀，这样您就可以轻松区分客户端路由和服务器端路由。

【讨论】：