【问题标题】:Express dynamic routing using / and /:slug as different route files使用 / 和 /:slug 作为不同的路由文件来表达动态路由
【发布时间】:2015-06-17 07:55:33
【问题描述】:

所以我正在重构我的 node/express 应用程序,并且我正在尝试分离我的根。这是我的问题:

我想要一个主页,然后是一个完全不同的扩展页面,不属于其他路线。

例如,假设我有 3 个页面:主页、关于,然后是 URL 为“mysite.com/username123”的用户页面。

现在我知道(或至少相信)这可以通过执行以下操作来实现:

var express = require('express');
var router = express.Router();
router.get('/:slug', function(req, res, next) {
    if(req.params.slug) {
        var data = { 
            my: 'data'
        };
        res.render('index', data);
    } else {
        var userdata = { 
            my: 'data'
        };
        res.render('user', userdata);
    }
});
module.exports = router;

但这不是我想做的;我想将它们保存在两个不同的路由文件中。所以我的 app.js 文件会是这样的:

var routes = require('./routes/index');
var users = require('./routes/users');
var about = require('./routes/about');

app.use('/', index);
app.use('/', users);
app.use('/about', about);

如果有 slug,/users 会在哪里渲染。这实际上是一种工作。如果没有:slug,则加载索引文件,否则加载用户文件(路由文件中有:slug,此处未显示)。但随后/about 被覆盖。

现在我想我可以将 /about 推到列表的顶部,这会起作用,但这似乎非常草率,这样做的重点是正确地构建我的代码。

应该如何妥善处理此类情况?有人可以在这里给我一些帮助吗?

【问题讨论】:

  • 这是因为/about/:slug 覆盖。换句话说,express 无法判断 about 是否不是一个蛞蝓
  • 谢谢。我明白为什么会这样。我只需要知道我应该如何解决这个问题,同时将/:slug 保存在一个单独的文件中,而不是/ 的主页
  • 你需要在用户的路由中添加一些东西。例如:router.get('/users/:id'`
  • 但是我没有 /users/ 页面,我也不想要。我希望用户名出现在域名之后。
  • Ian 在这种情况下,您可以使用/:folder 并通过req.params.folder 签入if/elsecondition 进行路由

标签: javascript node.js express url-routing


【解决方案1】:

这是因为/about/:slug 覆盖。换句话说,express 无法判断 about 是否不是 slug

解决方案是

  1. 添加一个 url 参数让 express 区分路由。

    router.get('/users/:slug')

  2. 跳到下一条路线

    router.get(':slug', function (req, res, next) {
       if (req.params.slug === 'about') {
          return next();
    }
    
      // get user data and render
      res.render('user', userdata);
    });
    

在此下方附加/about 路由。

【讨论】:

  • 该死的。不是我希望的优雅解决方案,但这就是我现在要采用的方法。如果在接下来的 24 小时内没有人能提出更清洁的解决方案(如果甚至存在的话),我将投票将其标记为解决方案。谢谢大佬,非常感谢。
  • 在我的脑海中,这是我能想到的最好的。如果您找到更多elegant 解决方案,请发布
【解决方案2】:

只需按此顺序重新排列路线

app.use('/about', about);
app.use('/:slug', users);

静态路由将优先于动态路由。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2018-08-15
    • 2019-07-29
    • 2021-07-11
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多