路由中的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('/#'); 這樣就解決了問題，消除了煩惱! 從網址。 :)