路由中的Polymer和Page.js通配符

Question

我正在使用聚合物入门工具包，并试图访问到用户的路线，该路线在页面上没有必要链接。

routing.html：

page('/users/:name', function(data) {
  app.route = 'user-info';
  app.params = data.params;
});

在页面上，我有：

<a href$="{{baseUrl}}users/Addy">Addy</a><br>
<a href$="{{baseUrl}}users/Rob">Rob</a><br>
<a href$="{{baseUrl}}users/Chuck">Chuck</a><br>
<a href$="{{baseUrl}}users/Sam">Sam</a>

它正确匹配了具有指定url的4个用户，但是我希望路由匹配任何名称，即使没有指向页面的链接也是如此。

它将与将匹配所有内容的路由“ / users / *”一起使用，但是如果我不需要的话，我不想使用它。

Answer 1

您在那里的那条路线将实现您想要的。 page.js使用:字符的方式是作为标识符，之后应将其视为参数。 假设我们有以下路线：

page('/users/:name', function(data) {
 app.route = 'user-info';
 app.params = data.params;
});

这样我们可以匹配以下URL：

/users/Addy
/users/Chuck
/users/somebody

路由的:name部分可以是我们想要的任何内容，它将被匹配。 要知道您的聚合物代码中的:name部分是什么，您需要从定义路线时指定的函数中获取它。 在函数上传递的data参数包含该信息。

在此处定义的路由上，我们可以使用路由定义内的data.params.name访问:name参数。

page('/users/:name', function( data ){
  //We have access to the :name parameter here
});

让需要数据的元素知道数据是什么的最佳方法。 是将:name参数设置为app对象上的变量。

page('/users/:name', function( data ){
  app.route = 'user-info';
  app.params = data.params;
});

该代码将整个参数数据设置为您的app对象上的变量。 在这种情况下，我们要访问:name参数。 我们要解决的方法是将app.params对象传递给需要该数据的元素，并使用params.name访问:name参数，假设您在使用params已经命名了element属性。

<custom-elem params="{{params}}></custom-elem>

期望该元素成为<template is="dom-bind" id="app">子元素<template is="dom-bind" id="app">元素。

考虑到这一点，我们可以去那这样的路径匹配任何路径/users/anything ，如果你已经设置了你的用户页面正常，你将看到在这种情况下，信息用户的信息anything用户。

您可以在此处阅读有关使用page.js进行路由的更多信息： Visionmedia Page.js

---

要解决来自当前站点之外的问题，请使用以下代码。

var users = function(data){
  app.route = 'user-info';
  app.params = data.params;
};
page('/users/:name', users);
page('//users/:name', users);

这不是最优雅的事情，但可以解决问题。 它将导致带有两个斜杠的丑陋网址。

---

解决第二个问题的更好方法。 不要让我们成为hashbangs: true选项将其设置为false 。 而是将基本URL设置为此： page.base('/#'); 这样就解决了问题，消除了烦恼! 从网址。 :)