Navigo JS 路由器 - 重复路由问题答案

【问题标题】：Navigo JS Router - Duplicate routing issueNavigo JS 路由器 - 重复路由问题
【发布时间】：2018-08-12 20:41:01
【问题描述】：

不确定是什么问题，但我的Navigo 路由器正在复制路由。

路由器：

this.Navigo.hooks({
    before: (done, params) => {
        // some tomfoolery
        done();
    }
});

this.Navigo.on({
    '/:region/travel': (params) => {
        // import Travel module
        // some nonsense
    },
    '/:region/travel/car': (params) => {
        // import TravelCar module
        // some nonsense
    }
)};

this.Navigo.resolve();

问题

this.Navigo.navigate('/london/travel/car');

导航到/london/travel/car 也触发了/london/travel 的路由，从而导致各种胡闹。

这是标准行为吗？如果没有，可能是什么问题？

我可以重写路线，这样它们就不会发生碰撞，例如/london/travel-by-car，但如果可以避免的话，我真的不想。

更新 1：

我尝试切换路线的顺序，但没有任何区别。我通过首先声明最长的travel 路由/:region/travel/car 和最小的/:region/travel 最后一个来做到这一点。

更新 2：

我对此进行的研究越多，我就越坚信 Navigo 无法实现这一点。 Navigo 不支持嵌套路由。如果有人可以确认我的路由实际上是“嵌套的”，我将使用支持它们的替代路由库。

【问题讨论】：

标签： javascript ecmascript-6 single-page-application router es6-modules

【解决方案1】：

我的代码有点不同，但按您期望的方式工作：

    var router = new Navigo("/");
var render = (content) => (document.querySelector("#app").innerHTML = content);

router
.on('/:id', ({ data }) => {
        setuserId(data.id)
        if (verifiedUser) {
            console.log("User verified");
        } else {
            console.log("User NOT verified");
        }
        rendertemplate(userDataURL(), "#landing-template", "#app")
    })
    .on('/:id/q', ({ data }) => {
        // Example - flaging a send with 's' from 'SMS', perhaps a diff flow?
        setuserId(data.id)
        rendertemplate(userDataURL(), "#landing-template", "#app")
        console.log("Source was a QRcode");
    })
    .on('/:id/q/t', ({ data }) => {
        // Example - flaging a send with 's' from 'SMS', perhaps a diff flow?
        setuserId(data.id)
        rendertemplate(userDataURL(), "#landing-template", "#app")
        console.log("Source was a QRcode in a Train");
    })

这会给我一个谨慎的“..已验证”/“源是一个二维码”/“源是一个火车中的二维码”console.log 响应。

【讨论】：