加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

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

发布时间:2020-12-17 09:44:59 所属栏目:安全 来源:网络整理
导读:#或#!是angular路由的特征,但是有时候我们由于种种原因不愿意去使用它。参考这篇资料之后, http://blog.fens.me/angularjs-url/ 发现无法解决。于是自己捣鼓。各种心酸,终于解决了。 解决了两个问题: 去掉# 刷新页面时仍然能匹配到对应的路由 angular代

#或#!是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',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。

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

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读