无法直接导航到 URL Angular UI 路由器

Posted 2023-03-07

【中文标题】无法直接导航到 URL Angular UI 路由器

【英文标题】：Can't navigate directly to URL Angular UI Router

【发布时间】：2015-10-24 09:13:10

【问题描述】：

这是我的路由器文件： 它嵌套在 require.js 块中并配置为使用 Jade 模板

define([
    './app',
    'angular.uirouter'
], function(app, angularUIRouter) 
    "use strict";

    // ROUTES
    app.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', function($stateProvider, $urlRouterProvider, $locationProvider) 

        // loads url from the index
        $urlRouterProvider.otherwise('/');

        $locationProvider.html5Mode(true);

        $stateProvider
            .state('dashboard', 
                url:'/dashboard',
                views: 
                    'core' : 
                        templateUrl: '/articles/dashboard'
                    
                
            ) 
    ]);
);

这是我的 Express.js 路由器文件：

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res) 
    res.render('main',  
        title: 'Express' 
    );
);

router.get('/dashboard', function(req, res) 
    console.log("/dashboard requested");
);

router.get('/articles/:name', function (req, res)  
    var name = req.params.name;
    res.render('articles/' + name);
);

module.exports = router;

当我访问 localhost:3000/dashboard 时，它正在向服务器发出 GET 请求。如何配置 Angular UI Router 来处理 GET 请求而不是服务器？

注意：我仍然可以访问 localhost:3000/articles/dashboard 并查看仪表板。还有，

a(ui-sref="dashboard")

正确加载仪表板。

【参考方案1】：

无论是 Angular 还是 ui 路由器都无法处理服务器 GET。 Angular $locationProvider html5Mode 仅解决客户端设置 - url 不包含 # 并且位置控件也是 URL 中的路径部分。

Html5 模式需要服务器端配置。每个请求都必须返回应用程序入口点 - 通常是 index.html。

例如

router.get('/dashboard', function(req, res) 
  res.sendfile('path-to/index.html');
);

【讨论】：

关于如何以这种方式显示仪表板寻呼机而不是将用户“重定向”到主页的任何想法？