#或#!是angular路由的特征,但是有时候我们由于种种原因不愿意去使用它。参考这篇资料之后,
发现无法解决。于是自己捣鼓。各种心酸,终于解决了。
解决了两个问题:
- 去掉#
- 刷新页面时仍然能匹配到对应的路由
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',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。
这样就解决了刷新后正确匹配路由的问题