0

我正在使用聚合物启动工具包，并试图访问不需要在页面上有指向它的链接的用户的路线。

路由.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/*'一起使用，但如果我不需要，我不想使用它。

4

1 回答 1

0

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

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

有了它，我们可以匹配以下网址：

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

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

在我们在这里定义的路由上，我们可以访问路由定义内部的:name参数。data.params.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对象传递给需要该数据的元素并使用 访问:name参数params.name，这假设您已经命名了使用它的元素属性params。

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

期望该元素是该元素的子<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('/#');这解决了问题并从 url 中删除了烦恼!。:)

于 2016-04-23T19:45:52.187 回答