去掉angularjs路由的#，node为服务器

最新推荐文章于 2026-06-22 10:05:16 发布

原创最新推荐文章于 2026-06-22 10:05:16 发布 · 1.6k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

angularJs 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了如何在AngularJS应用中去除路由中的#符号，并确保在页面刷新时仍能正确匹配路由。主要涉及AngularJS的配置调整以及Node服务器的设置。通过在AngularJS应用配置中添加相应代码，并在Node服务器端进行特定处理，实现了无#路由和页面刷新后的路由匹配。详细步骤和关键代码已给出。

#或#!是angular路由的特征，但是有时候我们由于种种原因不愿意去使用它。参考这篇资料之后，

http://blog.fens.me/angularjs-url/

发现无法解决。于是自己捣鼓。各种心酸，终于解决了。
解决了两个问题：

去掉#
刷新页面时仍然能匹配到对应的路由

angular代码

在angular应用配置中添加：

angular.module('myApp')
.config(function($locationProvider) {
  $locationProvider.html5Mode(true)
})

在首页应用中添加：
base('/')
基本上网上能查到的这两步都有，但是用node做服务器的时候服务器端的处理才是最重要的。

node代码

根据上述参考文章（无法解决），做出修改。

app.use('/', function (req, res, next) {
  if (req.path.indexOf('/api') >= 0) {
    res.send('server api');
    next(); 
  } else {
    res.sendFile(__dirname + '/static/index.html');
  }
})

// 另外的api请求
app.get('/api/validate', function (req, res) {
  console.log(1);
})

如果不加next()，那么这一段会匹配所有的路由，那么下面的app.get('/api/validate')不会执行。

为什么用app.use('/')，而不是app.get('/')呢？正是因为这个才导致刷新页面能不能正确跳转的问题。原因和上一个类似，app.get('/')会精确匹配路由，也就是说，这样写它只会匹配/路由，而app.use('/')能够匹配参数中的路由以及它的子路由，也就是说app.use('/')能匹配所有的路由，所有的页面刷新后都会被它处理。

在我的代码中，首先它会在url中查找有没有/api字符串，如果有，那么就是逻辑处理部分，即后端路由。经过处理后，我们使用next()来将路由交给别的处理（app.get('/api/validate')）。如果没有，代表前端路由，那么会res.sendFile(__dirname + '/static/index.html');。先进入这个页面，这个页面中有<div ng-view><div>。然后将url中/后面的内容交给angularjs路由处理。比如：在刷新页面后，

localhost:3000/login，这个url，经过res.sendFile(__dirname + '/static/index.html');后，那么/login会交给angularjs路由部分处理。
localhost:3000/api/validate，这个url，在调用next()后，app.get('/api/validate')准确匹配到路由，打印出1。

这样就解决了刷新后正确匹配路由的问题