动态路由 ExpressJS 基于链接值答案

【问题标题】：Dynamic Route ExpressJS Based on link value动态路由 ExpressJS 基于链接值
【发布时间】：2015-08-30 21:45:45
【问题描述】：

我正在尝试设置一些动态路由，从所选链接中提取值并将其传递到我的路由中，然后放在下一页的名称之前。例如：

我在'/' 上有一个链接，然后点击一个链接<a href="#" id="solid-choice">Solid</a>

我想把这个链接值传入到下一页渲染的路由中。点赞'/solid/next-page'

我设置了一些路由，但我认为它没有按照我想要的方式正确地拉动路由。 /:pattern/next-page 是我特别说的路线

这是我的看法：

<!DOCTYPE html>
<head>
    {{> head}}
</head>
<body class="pattern-wrapper">
{{> navigation}}
    <div class="container">
        <div class="row pattern-choice">
            <div class="col-md-12">
                <h2><i>Choose a pattern</i></h2>
                <ul>
                    <li class="button-border">
                        <h3 class="button-choice" ><a href=":pattern/next-page" class="button-link" id="solid-choice">SOLID</a></h3>
                    </li>
                    <li class="button-border">
                        <h3 class="button-choice" id="stripe-choice"><a href=":pattern/next-page" class="button-link" id="stripe-choice">STRIPE</a></h3>
                    </li>
                    <li class="button-border">
                        <h3 class="button-choice" id="plaid-choice"><a href=":pattern/next-page" class="button-link" id="plaid-choice">PLAID</a></h3>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>

这是我目前的路线：

var express = require('express');
var router  = express.Router();

router.get('/', function(req, res){
    res.render('pages/index.hbs');
});

router.get(':pattern/next-page', function(req, res){
    req.param('pattern');
    res.render('pages/color.hbs');
});

router.get('/suit-result', function(req, res){
    res.render('pages/suit-result.hbs');
});

module.exports = router;

【问题讨论】：

标签： node.js express routes

【解决方案1】：

你很接近。您需要使模式变量可用于您的模板。您可以通过将 res.render('pages/color.hbs') 更改为 res.render('pages/color.hbs', {pattern: req.params.pattern}) 来做到这一点。

然后您更改模板以使用新可用的变量：<a href="{{pattern}}/next-step"></a>

【讨论】：

嘿@Ryan，谢谢你的回答。我对您进行了更改，但是当我单击链接时，它会将我带到 localhost:3000/next-page，但是找不到 404 错误页面并省略了 {{pattern}}。这些是正确的变化吗？ router.get('/:pattern/next-page', function(req, res){ res.render('pages/color.hbs', { pattern: req.params.pattern }); });<a href="{{pattern}}/suit-color">Solid</a>
其实这比我原先想象的要复杂一些。当有人点击一个步骤时，这不应该改变哪些步骤可供他们点击吗？
被点击的链接的值应该是传递给{{pattern}}的值所以在我上面的例子中Solid将代替{{pattern}}使链接发送给用户到/solid/suit-color
尝试在href和路由href="/{{pattern}}/..."router.get('/:pattern/...')添加一个前导斜杠
仍然无法正常工作。该链接删除了localhost:3000，我现在得到了`//next-page'。这可能是因为路由不知道选择了什么参数，因为它不能全局访问？我不确定是否通过单击链接实际上提供了一个参数，然后路由可以使用该参数。这听起来对吗？