前端路由示例

如下示例演示了参数路由与反应性数据流的结合。这是一个完全可以工作的 NX app。只要把如下代码拷贝进一个空的 HTML 文件中， 然后在现代浏览器中打开它来试用。

  1. <script src="https://www.nx-framework.com/downloads/nx-beta.2.0.0.js"></script>
  3. <script>
  4. nx.components.app({
  5.   params: {
  6.     title: { history: true, url: true, default: 'Gladiator' }
  7.   }
  8. }).use(setup).register('movie-plotter')
  10. function setup (comp, state) {
  11.   comp.$observe(() => {
  12.     fetch('http://www.omdbapi.com/?r=json&t=' + state.title)
  13.       .then(response => response.json())
  14.       .then(data => state.plot = data.Plot || 'No plot found')
  15.   })
  16. }
  17. </script>
  19. <movie-plotter>
  20.   <h2>Movie plotter</h2>
  21.   <p>Title: <input type="text" name="title" bind /></p>
  22.   <p>Plot: @{plot}</p>
  23. </movie-plotter>

状态中的 title 属性会自动与 URL 和 浏览器历史保持同步。传入函数中的 comp.$observe 会被监听，当标题改变的时候，它会自动抓取对应的电影情节。这会创建一个强大的完美地和浏览器结合的反应式数据流。

前端路由示例 - 图1

这个 app 没有展示路径路由。想看更多的完整示例请查看 intro app，NX Hacker News clone 或者 path routing 和 parameter routing 文档页面。都有可编辑示例。