javascript - 链接在 Angular 应用程序中有效，但在地址栏中无效

Question

如果我在地址栏中输入 website.com/about-us/，它就会崩溃。

• 说“未找到”而不是加载页面

如果我在地址栏中输入 website.com/#!/about-us，它会转到正确的页面。//添加了 hashbang 或 #!

如果我单击页面上指向 website.com/about-us/的链接(没有 hashbang)，它会起作用。我该如何修复它，这样我就可以在地址栏中没有哈希爆炸的情况下直接访问该网站？

$locationProvider.html5Mode(true);

更新

这是我的服务器配置

app.route('/').get(index.render); // UPDATE: This is why the home page was loading and I could click links

app.get('/.\*', function (req, res, next) {

    if(req.url.substring(0,4) === "/api") {
      return next();
    } else {
    res.send(index.render) // render is a function in the index controller

    }

});

Answer 1

TL;DR:链接点击按预期工作，因为您的 JavaScript 已经加载

由于您使用的是 UI 路由器，因此 Angular 会“告知”链接点击转到适当的 hashbang 路由，除非您使用 $locationProvider.html5Mode(true);，而您确实是这样。因此，在这种情况下，链接点击知道使用 html5Mode，因为您页面中的 JavaScript 已经加载。

当您在地址栏中手动输入链接时，JavaScript 还没有机会加载，因此它“不知道”将适当的非 hashbang 路由映射到您应用中的正确 View 。

要获得所需的行为，您需要将服务器配置为正确路由:

app.get('/some-page', doStuff);