带有正斜杠的页面加载时的骨干路由错误答案

【问题标题】：Backbone routing error on page load with forward slash带有正斜杠的页面加载时的骨干路由错误
【发布时间】：2014-11-07 22:27:56
【问题描述】：

我在 Backbone 应用程序中设置了一些带有正斜杠的路由：

 app.Router = Backbone.Router.extend({

    routes: {
        'dashboard/:locationId/:product/:year': 'dashboard',
        'bargraph': 'bargraph'
    },
 ....

文档准备好后，我启动了 Backbone 历史插件，之后，我的路由正常工作，并且功能按预期运行。

 $(function () {
    Backbone.history.start();
});

但是，如果我使用 URL 中已有的路由重新加载页面，我会收到错误消息（在 Chrome 中，但可能在其他浏览器中也是如此）：

Uncaught Error: Syntax error, unrecognized expression: #dashboard/3/productA/2009

我只收到带有正斜杠的路由的这个错误。我的条形图路线似乎在没有正斜杠的情况下在页面加载时工作正常。

我猜这与调用Backbone.history.start 函数的时间有关。最简单的解决方案是去掉 URL 中的正斜杠并使用其他一些 URL 安全分隔符。但它甚至会在页面加载时中断/ 的 URL 编码版本。而且看起来不太好。

Uncaught Error: Syntax error, unrecognized expression: #dashboard%2F3%2FInVigor 8440%2F2009

不幸的是，错误来自 jQuery 的缩小版本，所以我不知道这是一个常见问题还是在网站上某个不起眼的位置发生的特定问题。

有人对可能的罪魁祸首有任何建议吗？可能的解决方法？

编辑：添加 Stacktrace

未捕获的错误：语法错误，无法识别的表达式：#dashboard/3/productA/2009 VM142

    standard.js:2$.error VM142 
    standard.js:2bc VM142 standard.js:2
    bk VM142     standard.js:2
q.querySelectorAll.bk VM142 standard.js:2
$ VM142 standard.js:2p.fn.extend.find VM142 standard.js:2
p.fn.p.init VM142 standard.js:2p VM142 standard.js:2c VM149 BCSUS_scopeScripts_B020D85856E4B758EB7D71EC4F5B7E5F.js:1
(anonymous function) VM149 BCSUS_scopeScripts_B020D85856E4B758EB7D71EC4F5B7E5F.js:1
p.Callbacks.k VM142 standard.js:2
p.Callbacks.l.fireWith VM142 standard.js:2
p.extend.ready VM142 standard.js:2D

它是缩小的，但 standard.js 包含 jQuery 和其他插件的副本。行号不是很有帮助，但函数名称可能在某些方面很有帮助。

【问题讨论】：

控制台中此错误的调用跟踪是什么样的？
堆栈跟踪中的 q.querySelectorAll 是否表明 jQuery 在尝试解析选择器时引发了错误？您是否有机会在 jsfiddle.net 上重现该问题？这对我来说不像是主干路由器问题。
你能做一个小提琴吗？
谢谢@mu 太短了。这是一个错误的 jQuery 选择器在页面加载时抓取哈希。不是主干路由问题。

标签： javascript jquery backbone.js

【解决方案1】：

嗯，我发现了这个问题，这与主干路由无关。网站的一部分在页面加载时将location.hash 输入到选择器中。掌脸

if (location.hash) {
     ...
       doSomething(location.hash); // <-- feeds into a jQuery selector
    }

function doSomething(id) {
    var container = $(id);
 .....

这是在 js 应用程序启动并导致问题之前运行的。最后的简单解决方案是将其包装在try catch 子句中。

感谢 Mu 和 Quince 指出这一点。

【讨论】：