聚合物，在链接的app-route元素上更改路由
聚合物是一种用于构建现代Web应用程序的开源JavaScript库。它是Google推出的一套Web组件规范和工具集，用于创建可重用、可组合和可扩展的用户界面组件。
聚合物的主要特点包括：
- 组件化：聚合物鼓励将应用程序拆分为独立的组件，每个组件都有自己的样式、行为和模板。这种组件化的开发方式使得代码更易于维护和重用。
- 数据绑定：聚合物支持双向数据绑定，可以将数据模型与用户界面保持同步。当数据发生变化时，界面会自动更新，反之亦然。
- 响应式设计：聚合物的组件可以根据不同的设备和屏幕尺寸自动调整布局和样式，以提供更好的用户体验。
- 强大的工具集：聚合物提供了丰富的工具和库，用于简化开发过程。其中包括Polymer CLI用于项目管理、Polymer Designer用于可视化组件开发、Polymer Starter Kit用于快速搭建项目等。
聚合物的应用场景非常广泛，可以用于开发各种类型的Web应用程序，包括单页面应用、响应式网站、移动应用等。
在腾讯云中，可以使用腾讯云的云托管服务来部署和运行聚合物应用程序。云托管提供了高可用性、弹性伸缩和自动化部署等特性，可以帮助开发者更轻松地管理和扩展应用程序。
更多关于聚合物的信息和腾讯云相关产品介绍，请参考以下链接：
相关·内容
你好，我试着在我的聚合物应用程序上使用应用程序控制器。这就是我所拥有的：
<app-router>
<app-route path="/order/:orderId">
<template>
<p>Your order number is <span>{{orderId}}</span></p>
</template>
</app-route>
</app-router>
但我在浏览器里看
浏览 2提问于2015-10-29得票数 0
回答已采纳
我的问题是链接应用程序路由。最初，我认为这个bug来自我的应用程序，但我用一个简单的例子重新创建了它。该问题源于首先访问与子路由匹配的url，然后更改路由，使其与子路由不匹配。
我不能使用聚合物cdn基标签，因为它将改变路由行为。如果您复制并粘贴运行bower init; bower install --save PolymerElements/app-route; python3 -m http.server;的代码，那么它应该运行示例代码。
问题
单击指向#/tree/maple的链接会导致routeData.collection = 'tree'，subrouteDa
浏览 2提问于2016-11-14得票数 6
回答已采纳
刚开始使用聚合物1.0。我的单页聚合物1.0应用程序有多个路由。
<paper-drawer-panel id="mainPanel" class="flex" >
<app-router id="router" class="flex" mode="pushstate">
<app-route path="/" element="page-landing"></app-route>
浏览 0提问于2015-08-20得票数 0
2回答
我们目前正在使用<app-route>进行路由，现在正在使用polymer-redux实现Redux。不过，目前还不清楚什么是将两者结合起来的最佳方式。由于<app-route>维护自己的状态，所以我们不能将它真正存储在Redux存储中。但是，对于用户可以执行的一些操作，我们也希望更新URL。
我目前的想法是对中间件做一些事情，但我不太清楚如何最好地从中间件内部访问/修改<app-route>中的路由。我们如何才能最好地解决这个问题？
浏览 6提问于2017-01-03得票数 4
当您使用<app-route>进行子路由时，是否需要多个<app-location> (例如，在父页面和子页面中)？或者每个应用程序只有一个<app-location>？
浏览 0提问于2017-03-10得票数 2
1回答
我正在使用聚合物，并试图获得应用程序路由器设置。我无法让应用程序将用户定向到登录页面。
我已经单独测试了所有其他部分，所以我知道我的页面将会呈现。
<dom-module id="app-body">
<template>
<app-location route="{{route}}" use-hash-as-path></app-location>
<app-route route="{{route}}" pattern="/:page"
浏览 2提问于2016-09-25得票数 0
2回答
我正在尝试下载一个Polymer 2.0应用程序中动态生成的文件。下载在聚合物元素中工作，但不能在聚合物应用程序中工作，我认为是因为应用程序路由。下载的Javascript代码如下：
_downloadCSV() {
var bigarray = ['User name, Full name, Age, City, Email\n'];
var a = window.document.createElement('a');
a.href = window.URL.createObjectURL(new Blob(big
浏览 3提问于2017-06-21得票数 0
在phonegap中编译我的应用程序后，我在polymer pushstate routing上遇到了问题。我正在尝试使用中的app-router-examples。
当我用apache cordova编译我的应用程序时，我的android设备上只有一个空白屏幕。
我的index.html页面中的代码，这是我的主路由器页面。我所有的网页都在/pages目录中
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv=&#
浏览 4提问于2015-05-11得票数 0
2回答
我想部署一个网络应用程序。
由于聚合物似乎是用<app-route>来管理路由，所以我可以在我的服务器上安装并运行polymer serve吗？或者我应该做一个后端，如果是的话，我如何将它与聚合物前端连接？
浏览 0提问于2016-12-23得票数 3
回答已采纳
在聚合物中的一种简单的路由配置中，就像从初学者工具包获得的那样：
<app-location route="{{route}}"></app-location>
<app-route
route="{{route}}"
pattern="/:page"
data="{{routeData}}"
tail="{{subroute}}"></app-route>
<app-drawer-layout fullbleed>
浏览 3提问于2016-12-02得票数 1
回答已采纳
1回答
我有一个简单的设置：
索引：
<app-router>
<app-route path="/home" element="home-element" bindRouter></app-route>
<app-route path="/test" element="test-element" bindRouter></app-route>
</app-router>
测试元素：
<dom-module id="test-eleme
浏览 3提问于2015-11-01得票数 0
我使用聚合物作为应用程序，使用Erik的进行路由。守则如下：
在index.html中：
<app-router mode="pushstate">
<app-route path="/" import="/elements/login-page/login-page.html"></app-route>
<app-route path="/dash" import="/elements/dash-page/dash-page.html"></app-r
浏览 3提问于2015-03-17得票数 0
回答已采纳
1回答
我将应用程序中的PageJS路由替换为app-location和app-route，除了查询参数之外，一切似乎都正常工作。我注意到它只能读取像host?param1=val1#/view这样的URL，而不能像PageJS以前那样读取host#view?param1=val1。
经过进一步的挖掘，我发现这实际上是一个。我觉得奇怪的是，PageJS和PageJS可以使用非标准的查询字符串格式。
是否有一种方法可以使用query-params属性app-route来读取非标准的查询参数以实现向后兼容性？
浏览 5提问于2017-07-28得票数 1
回答已采纳
我的应用程序路由器设置如下：
<app-router id="router" mode="pushstate">
<app-route path="/:category" import="bower_components/my-elements/category-page.html"></app-route>
<app-route path="/product/:query" import="bower_components/my-elements/product-
浏览 3提问于2014-12-17得票数 1
回答已采纳
是否有一个内置的方法来路由多个可能的链接到同一个“页面”？
例如，我有一个'/‘路由，它通过将该路由的活动属性绑定到一个名为landing的属性来加载着陆页，该属性正在被观察到。我能想到的最直接的方法是为新路由创建另一个应用程序路由元素，并将其活动属性绑定到与'/‘路由相同的着陆-活动属性。
是否有更好/不同的方法来处理这个问题，还是应该坚持我的方法？
编辑：我尝试了我的方法，但它不起作用。这是我最初的路线：
<app-route
id='landing-route'
route='{{route}}'
pattern='
浏览 3提问于2017-02-10得票数 0
我正在使用app-route和iron-pages和一个纸质工具栏来显示我的视图。
在我的一个视图main-view上，显示了一个随机选择的图像，该图像在每次加载页面时都会发生变化。每次从工具栏中选择main-view时，页面都会重新加载，以便显示新图像。
问题是，如果我已经在/main-view url上并从工具栏中选择它，它不会刷新页面。有没有办法做到这一点？
浏览 4提问于2017-02-24得票数 0
回答已采纳
2回答
我试图通过以下指南将应用程序路由器整合到我的聚合物应用程序中：
我的聚合物代码如下所示，我在其中加入了应用程序路由器：
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../app-router/app-router.html">
<polymer-element name="my-element">
<template>
<style&g
浏览 6提问于2014-12-13得票数 1
回答已采纳
1回答
I‘阅读：和：
我想我只是搞不懂如何使用子路由组件，但是我读过的文档和示例并没有真正帮助我。
如果有人能帮我指出房间里的大象那就太好了。
我想达到什么目的？我在-matters.html上显示了一个项目列表(名为Matters.html)(该页面当前调用另一个名为matters-list.html的自定义元素，它通过列表实现) 。
我希望能够点击其中之一，转到一个详细信息页面(我已经构建了这个名为matters-details.html EG：的模板)。
问题是：
如何处理my-matters.html上的路由?我的理解是，如果我添加一个按钮来点击href /matters/123，那么在my
浏览 3提问于2018-07-23得票数 0
回答已采纳
1回答
我只是在试用聚合物1.0。我发现app-route/iron-pages不起作用。在路由之间导航似乎没有显示正确的视图。不知道哪一部分出了问题：
在主文件中：
<app-drawer-layout>
<app-location route="{{route}}"></app-location>
<app-route
route="{{route}}"
pattern="/:view"
data="{{routeData}}"
tail="{
浏览 4提问于2016-08-21得票数 2
1回答
我坚持在聚合物3中实现路由，我遵循了应用程序提供的基本指南-路由文档。但是在加载网页时，我没有看到任何组件被加载。我签入了shadow DOM，没有看到任何DOM被呈现。不知道我错过了什么。这是密码。
static get properties() {
return {
page:{
type: String,
reflectToAttribute: true,
observer: '_pageChanged'
}
};
}
_pageChanged(curren
浏览 4提问于2019-03-24得票数 3
回答已采纳
当我点击我的项目的每个链接并转到每个页面时，它是工作的，但我不知道为什么当我在聚合物中重新加载页面时，我得到404错误。请帮我补充一下我遗漏了什么。
这是我的app-location，app-route和iron-pages。
<app-location route="{{route}}"></app-location>
<app-route
route="{{route}}"
pattern="/:page"
data="{{routeData}}"
tail=
浏览 0提问于2017-03-01得票数 2
1回答
我试图在Google上运行这个聚合物应用程序()。通过设置路由，我能够让第一页工作。
webapp2.Route(r'/polymer', handler=project_handler.PolymerHandler, name='polymer'),
但是，当Github成功地将登录用户返回回回调URL时，问题输入屏幕(list.html)就不会出现。(财政年度。当我在GAE之外运行完全相同的项目时，它工作得很好。因此，我认为问题在于我的GAE路由设置。)
<core-header-panel>
<div class="core-
浏览 1提问于2015-01-30得票数 0
回答已采纳
当我使用app-route进行路由时，url会改变，但数据会显示在前一页本身。当我单击Quiz page时，数据将显示在单击它的页面中，而不是显示在评估页面中。我该如何解决这个问题呢？
my-data.html
<app-location route="{{route}}" use-hash-as-path>
</app-location>
<app-route route="{{route}}"
pattern="/:page"
d
浏览 0提问于2018-02-10得票数 0
1回答
我想在这方面寻求您的帮助:我有一个具有以下结构的应用程序：
路线：
<my-app>
- <my-application>
- <my-admin>
- <my-adminlogin>
- <my-workplace>
问题是，我试图使用app路由元素来执行应用程序路由：
<my-app>元素：
<app-location route="{{route}}"></app-location>
<app-rou
浏览 2提问于2016-06-17得票数 1
回答已采纳
1回答
我有一个vaadin网格，里面有我的信息。我希望网格不是打开一个对话框，而是像任何其他链接一样路由到一个新页面。
我正在使用app-route，但不知道如何进入下一页。
每一行都有自己的ID，这就是应该在路由中传递的所有内容。我希望每一行都有自己的链接点击时也。因此，每个id都应该是localhost:8000/dashboard/{{ id }}，方法是根据传递的id调用构建页面的相同元素。
有没有一种方法可以在vaadin网格之外做到这一点？
浏览 2提问于2017-12-14得票数 0
我试图将app路由的参数传递给未定义的自定义元素。我可以在文件中显示这个参数，但是在自定义元素中，它没有定义。下面是我的代码，请帮助我检查如何修复它。谢谢。
在自定义元素文件中，getid未定义。
我的档案
<app-route
route="[[route]]"
pattern="/:slug/:id"
data="{{routeData}}"></app-route>
<!-- display correctly -->
[[routeData.id]]
<
浏览 0提问于2016-11-17得票数 0
回答已采纳
1回答
我正在努力找出一些基本路线。我使用的是聚合物1.5.0，我在使用嵌套路由时遇到了问题。
我使用的是应用程序路由0.9.2
作为，聚合物在路由过程中采用分散的方法。因此，我决定做以下工作：
<app-route route="{{route}}"
pattern="/:page"
data="{{data}}"
tail="{{tail}}">
</app-route>
<iron-pages selected="{{data.page}}"
浏览 1提问于2016-07-27得票数 3
回答已采纳
我想使用app-router传递所选网格的id。不知何故，我似乎遗漏了一个环节。我希望能够传递网格中选定行的id，如果为assessmentId，则在iron-ajax url 中使用该值。
my-data.html
<dom-module id="my-data">
<template>
<style include="shared-styles">
:host {
display: block;
padding
浏览 6提问于2018-02-08得票数 0
1回答
我正在写一个聚合物网站，最近我决定，如果我把我的主要逻辑从index.html移到web组件中，我的站点的架构会更好。由于某些原因，在web组件中，当我使用paper-scroll-header-panel时，什么都不会显示。当我注释掉它的导入时，事情又开始显示了。当所有东西最初都在index.html中时，一切都如预期的那样正常工作。
我不明白为什么现在不行了。你知道我做错了什么吗？
新index.html
<!doctype html>
<html lang="">
<head>
<meta charset="utf-
浏览 5提问于2016-03-26得票数 0
回答已采纳
2回答
我试图使用App和App在聚合物中传递我的urls中的变量，但是子路由似乎没有选择这些变量。有人能帮我找出我做错了什么吗？
代码：
<app-location route="{{route}}"></app-location>
<app-route
route="{{route}}"
pattern="/desk/:project/:scene"
data="{{data}}"
tail="{{subroute}}">
</app-route&g
浏览 2提问于2017-01-05得票数 0
回答已采纳
1回答
我用霓虹灯动画页面创建了不同的页面。
因此，当我使用href转到页面时，它是工作的，但当我尝试重新加载页面时，我有一个404错误。
这是我的app.html
<app-location route="{{route}}" use-hash-as-path></app-location>
<app-route
route="{{route}}"
pattern="/:view"
data="{{routeData}}"
浏览 2提问于2018-02-06得票数 0
1回答
我在试图将聚合物应用程序部署到服务器时遇到了问题。我使用聚合物-Cli创建了应用程序。另外，路由也是使用<app-route>元素完成的。服务器是IIS Server，出现此问题是因为他们希望将应用程序部署为一个目录：
Rapidsites.com/msa/。我将其他网站上传到根目录，我从未遇到过问题，但在这种情况下，我有几个站点：
应用程序找不到my-app.html。(这个问题我通过从开头删除"/“来解决：<link rel="import" href="src/my-app.html">
路由不能全部工作，链
浏览 4提问于2016-09-13得票数 0
回答已采纳
我正在使用聚合物shop-app，并试图在domain/app部署。我设置了<base href="domain/app/"，它会正确加载应用程序外壳，但无法加载页面视图。
有没有办法在app-route组件中设置base href，或者有没有其他方法来解决这个问题？
浏览 3提问于2018-01-28得票数 0
1回答
我的聚合物2应用程序一直有问题，我首先检查了它的路由，但我发现在点击这个页面和Dom之后-如果导航回到页面时触发，它就不会重新启动。
例如，
如果我在url/matters/6719上，它会显示详细信息页面，但如果我单击后退按钮并转到url/matters，那么dom-如果没有再次被点击，它仍然会显示详细信息页面，
当使用我的导航选择器时也会发生这种情况，导航选择器的设置类似于PWA初学者工具包。
<link rel="import" href="../bower_components/polymer/polymer-element.html">
&
浏览 6提问于2018-08-06得票数 0
正当我想弄明白app-route是如何工作的时候，我遇到了一个问题，让我怀疑我对这个元素的理解是正确的。
据我所知，保持浏览器URL和路由的值同步是app-location的责任。如果其中一个发生变化，app-location会注意到另一个也在发生变化。
因为app-route的route属性与它的data属性是同步的，所以下面代码中的paper-tab对data属性的更改会导致app-route的route属性发生变化，从而导致app-location更新浏览器URL。
但是，由于我没有在纸质标签中使用回退选择属性，因此浏览到会将路径设置为'/‘，因此不会显示主页。
所以我想我可以用
浏览 5提问于2017-03-13得票数 0
3回答
聚合物元件不显示
、、
我正在一个聚合物网站工作，并有一些问题。我以前在index.html中有我的主要逻辑，我只是将所有的逻辑从它移到我创建的一个名为app.html的web组件中。当所有内容都在index.html中时，该网站运行良好，但当我将其全部放入web组件并在index.html中创建元素时，页面现在为空白。没有脚本错误或任何东西。
index.html：
<!doctype html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv=
浏览 4提问于2016-03-21得票数 0
回答已采纳
当我登陆我的应用程序时，主页就能工作了。当我手动导航到一个漂亮的URL (如myapp.com/registration-page)时，我得到：
404未找到nginx/1.11.5
当我使用应用程序中的链接/按钮浏览应用程序时，它可以正常工作，直到我在漂亮的URL上刷新页面。然后，我看到了同样的错误。我目前正在使用<app-location>和<app-route>来处理路由。
在使用polymer serve的开发模式下，所有浏览器都能正常工作。我的猜测是，这是一个聚合物问题，而不是一个nginx问题。在Chrome中，一切都很好，但在Firefox或Sa
浏览 2提问于2017-04-14得票数 0
我正在建立一个网站(而不是一个单一的页面应用程序)，使用聚合物元素。网站“<dom-module>”没有包含在应用程序中，但我仍然希望使用<app-route>元素。
如何在不创建包含整个站点的自定义“应用元素”的情况下做到这一点(我尝试将其全部放入<dom-module>中，但得到了大量错误)？
如果我只是在<body>标记中使用<app-route>和<app-location>，我会得到一个
Uncaught TypeError: Cannot read property 'length' of un
浏览 5提问于2017-11-15得票数 0
我在一个具有以下结构的项目上使用来自的app-route元素：
包含以下代码的my-app元素：
<app-location route="{{route}}"></app-location>
<app-route
route="{{route}}"
pattern="/:page"
data="{{routeData}}"
tail="{{subroute}}">
</app-route>
<iron-pages selected="
浏览 9提问于2016-07-25得票数 2
回答已采纳
1回答
如何向添加一个覆盖整个屏幕并且具有与默认视图不同标题的新页面(比如<my-view4>)？
<app-location route="{{route}}" url-space-regex="^[[rootPath]]">
</app-location>
<app-route
route="{{route}}"
pattern="[[
浏览 2提问于2017-09-22得票数 0
在聚合物应用程序中，app-location和app-route用于页面路由。应用程序的第一行包含app-location组件，如下所示：
<app-location route="{{route}}"></app-location>
据我所知，路由“{{route=}}”用于将app-location路由属性绑定到app-location组件外部定义的" route“变量。它是app-location的输入。"route“变量是在哪里定义的？
文档中说：app-location生成一个route值。这是否意味着app-location在
浏览 0提问于2016-08-10得票数 0
有没有一种方法可以使用app-route来创建一个catch all路由？
添加通配符似乎并不像我预期的那样工作。
浏览 3提问于2016-07-06得票数 0
也许我有妄想症。我总是希望我的代码尽可能的苗条。我总是目标我的网站在1.5MB以下(所有图像压缩和适当调整大小())。我在一个月前就开始研究聚合物了，我认为我可以从Bootstrap和jQuery中分别删掉150 KBs和90 KB，并且有一个相对轻量级的站点。
我刚刚硫化了我的elements.html文件，我很震惊。它是947 JS，没有图像，只是简单的HTML和JS。我有大约40个自定义元素+几个元素目录(而且我甚至不太接近创建新元素)。(GZip为947 KB中的307.40 KB)(使用ASP.NET MVC5和.NET 4.6)。
与正常的3G连接，在Chrome 52中加载大约需
浏览 3提问于2016-08-01得票数 2
回答已采纳
1回答
我正在尝试使用以下代码实现路由：
HTML :
<app-location route="{{route}}"></app-location>
<app-route
route="{{route}}"
pattern="/etw/:page"
data="{{routeData}}"
tail="{{subroute}}"></app-route>
<iron-pages
selected="[[page]]"
attr-for-select
浏览 0提问于2017-06-11得票数 0
1回答
我怎么能在聚合物中得到查询字符串呢？
http://localhost:8080/search?param=ppshein
我想在聚合物中得到search?param=ppshein或param=ppshein。
我尝试在app-route中获取查询字符串，但它没有显示任何内容。
<app-route
route="[[route]]"
pattern="/:id"
data="{{routeData}}"></app-route>
[[routeData.id]] **
浏览 4提问于2016-11-18得票数 5
回答已采纳
1回答
有可能在霓虹灯动画页面之间使用纸张标签吗？我跟随博客文章编写了下面的代码，这些代码应该按照本教程的要求工作，但是它没有。
...
<paper-tabs selected="{{data.tabName}}" attr-for-selected="key" sticky>
<paper-tab key='foo'>Foo</paper-tab>
<paper-tab key='bar'>Bar</paper-tab>
<
浏览 1提问于2016-09-16得票数 0
回答已采纳
我有一堆基于聚合物初学者工具包的页面，它们在polymer serve上工作得很好。但是，我需要通过服务器发送一些ajax请求以进行数据库查询，因此我不得不用express.js编写自己的服务器代码。我的问题是，每当我进入一个非根页面并刷新时，我都会收到消息Cannot GET /bugs或/page名称。我的index.html页面照常引用container.html，它的应用路由代码如下：
<app-location route="{{route}}"></app-location>
<app-route
route=&
浏览 7提问于2017-03-10得票数 1
回答已采纳
1回答
我正在使用应用程序路由组件来路由。
下面是代码的重要部分：
<app-location route="{{route}}"></app-location>
<app-route
route="{{route}}"
pattern="/:page"
data="{{routeData}}"
tail="{{subroute}}"></app-route>
我想提高我的应用程序结构的清晰度，这样设置就不会在根
浏览 3提问于2016-11-19得票数 0
回答已采纳
我正在学习聚合物，我遇到了一些关于app-route和app-location的问题。我试过这样一个简单的例子：
<dom-module id="test-component">
<template>
<style scoped>
</style>
<app-location route="{{route}}" use-hash-as-path></app-location>
<app-route route=&
浏览 8提问于2017-06-08得票数 2
1回答
我正在尝试一个非常简单的路由，但无法使其工作。我的代码：
<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<dom-module id="lab1-app">
<template>
<style>
:host {
display: block;
}
</style>
<app-location route
浏览 9提问于2017-10-27得票数 0
云服务器
ICP备案
实时音视频
对象存储
云直播
腾讯云开发者
