Polymer2.0 路由

  <app-location route="{{route}}"> </app-location>
  <app-route route="{{route}}"
             pattern="/:key"
             data="{{routeData}}"
             tail="{{subroute}}">
  </app-route>

猛的一看是不是很懵逼不知道，到底都是什么意思，不知道何时赋值，何时取值，

这里我只讲一下怎么去测这几个属性，

key会变成routeData对象的键名， 实际开发中你要用的一般是routeData.key的值；

routeData.key的值从哪里来的呢？

来自你的匹配模式 pattern中的的"/" 他会匹配地址栏中的第一个"/" 

假如你现在做个a链接 href ="/aa/bb/cc/dd"，点击下做个延时打印

这样的话routeData.key = aa

subroute会变成 {prefix："/aa", path:"/bb/cc/dd"}

如果把pattern换成 "/aa/:key"

重复上面的操作：

此时 routeData.key = bb, subroute 变成{“prefix”：“/aa/bb", path: "/cc/dd"}

 

然而这个东西单独使用并无卵用，此时页面没有任何变化；

它是要结合 iron-selector 和iron-pages 使用的 ：

iron-selector 里面放入a标签 iron-pages放入你要切换的页面

把iron-selector的selected属性和iron-pages的selected属性 和routeData.key 绑定到一起