聚合物和页面.js路由中的通配符

Question

我正在使用聚合物起始套件，并尝试访问用户不需要在页面上有指向它的链接的路由。

路由.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

你在那里的路线将实现你想要的。页面.js 的方式使用 : 字符作为标识符，在此之后的内容应被视为参数。假设我们有以下路线：

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

这样，我们可以匹配以下网址：

/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 。

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

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

考虑到这一点，我们可以转到与路线匹配的任何路线，因此/users/anything，如果您已正确设置用户页面，您将看到用户的信息，在这种情况下anything用户的信息。

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

---

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

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

这不是最优雅的事情，但会解决问题。它会导致具有两个斜杠的丑陋 URL。

---

解决第二个问题的更好方法。我们不要hashbangs: true选项将其设置为false.而是将基本 url 设置为以下内容：page.base('/#'); 这样可以解决问题并从 url 中删除 annoiyng !。:)