本篇,你可以学到Ember页面的创建,并且在不同的页面之间跳转。新建两个页面,一个是创建about页面,一个是创建contact页面。
看完本篇你将学到如下知识点:
- 定义路由
- 使用路由模板
- 自定义路由URL
- 使用组件在不同模板之间跳转
- 组件之间传递参数、属性
定义路由
在前一篇,我们定义了一个index.hbs首页,接着继续在templates下面创建新的页面。
首先通过Ember CLI创建一个路由,
ember g route about
本机创建日志:
ubuntuvim at ubuntuvim-mbp.local in [~/code/super-rentals] on git:master ✗ 9b5a1ac "Initial Commit from Ember CLI v3.18.0"23:22:20 › ember g route aboutinstalling route create app/routes/about.js create app/templates/about.hbsupdating router add route aboutinstalling route-test create tests/unit/routes/about-test.js
题外话:
ubuntuvim at ubuntuvim-mbp.local in [~/code/super-rentals] on git:master ✗ 9b5a1ac "Initial Commit from Ember CLI v3.18.0"
23:22:20 ›
这一段是我本机命令行自动前缀,如果你的命令行安装过zsh这个工具,就会很熟悉,zsh是一个非常强大而且漂亮的命令行工具。
打开router.js,可以看到自动创建了一个路由this.route('about');
使用路由模板
修改about路由模板文件app/templates/about.hbs,在文件内添加一下HTML内容。
{{!-- app/templates/about.hbs --}}
About Super Rentals
The Super Rentals website is a delightful project created to explore Ember. By building a property rental site, we can simultaneously imagine traveling AND building Ember applications.
浏览器访问验证:http://localhost:4200/about。可以看到about页面的内容
![625eff34045c36ce7bf6a83aecad4c47.png](https://i-blog.csdnimg.cn/blog_migrate/204e3c675d4de26f1ed32ed4494ebcf1.jpeg)
使用同样的方式创建contact路由。
ubuntuvim at ubuntuvim-mbp.local in [~/code/super-rentals] on git:master ✗ 9b5a1ac "Initial Commit from Ember CLI v3.18.0"23:22:37 › ember g route contactinstalling route create app/routes/contact.js create app/templates/contact.hbsupdating router add route contactinstalling route-test create tests/unit/routes/contact-test.js
在contact.hbs添加一些HTML内容。
{{!-- app/templates/contact.hbs --}}
Contact Us
Super Rentals Representatives would love to help you
choose a destination or answer any questions you may have.
Super Rentals HQ
1212 Test Address Avenue
Testington, OR 97233
+1 (503) 555-1212
superrentalsrep@emberjs.com
浏览器访问验证:http://localhost:4200/contact。可以看到contact页面的内容
![8e17061c467abad4164214c6209b6977.png](https://i-blog.csdnimg.cn/blog_migrate/be8cfaa89b30932574ccfd22651f4e1e.jpeg)
contact1.png
自定义路由URL
前面已经定义了两个页面,一个是about一个是contact。默认情况下访问的路径都是和路由同名的,另外Ember提供了非常灵活的扩展,你可以自定义的路由的访问路径,比如下面的代码,把contact路由的访问路径改为getting-in-touch,手动修改router.js文件。
Router.map(function() { this.route('about'); this.route('contact', { path: '/getting-in-touch' });});
注意看第三行,使用path属性指定这个路由的访问路径为getting-in-touch。
现在你在访问http://localhost:4200/contact就会发现报错了,提示找不到这个路由了。
![608412e4d9324ad7bae40d1f1faf6232.png](https://i-blog.csdnimg.cn/blog_migrate/fbc856af41a5c2d9746510a00684409d.jpeg)
contact2.png
再访问http://localhost:4200/getting-in-touch。可以看到页面的内容就是之前contact的内容。
![86e1f16075acf34c691a6dda63a14802.png](https://i-blog.csdnimg.cn/blog_migrate/b82b160154e89a85263a257918dd6c9a.jpeg)
contact3.png
使用组件在不同模板之间跳转
是Ember提供好的组件,用于在不同模板之间跳转,其作用类似于HTML标签中的标签。
为何不直接用标签而是要自定义一个跳转的组件呢??因为使用普通的标签,当你点击链接的时候会发送浏览器的刷新,但是Ember是单页应用不需要刷新整个页面,只要是实现页面的跳转即可(所谓的跳转其实就是实现不同的路由之间的切换,并且不会刷新页面)。
继续改造前面的创建的index,about和contact。分别在这两个模板页面中添加一个跳转的链接。
{{!-- index.hbs是 "/" 这个路径默认的页面。 --}}
Welcome to Super Rentals!
We hope you find exactly what you're looking for in a place to stay.
{{!-- 使用LinkTo组件添加一个跳转按钮,并且指定调整到的路由是about,也就是说当用户点击这按钮的时候会跳转到about这个子页面上 --}} About Us About Us With A Tag
![826b195dfc9460be8669636f8032b108.png](https://i-blog.csdnimg.cn/blog_migrate/cc07797c8db2906d11c891eeb0ab4e0c.jpeg)
index5.png
点击“About Us”这个按钮,然后看浏览器的地址栏,可以看到自动转到about这个路由下,并且页面不会刷新。为了验证前面所说的效果,我在About Us后面添加了一个标签按钮,当你点击这个链接的时候会看到浏览器自动刷新了,并且也跳转到about页面上。
![50a86ae82c85c011e46cd932ad93c2f6.png](https://i-blog.csdnimg.cn/blog_migrate/83527827456cef54578744ac8e9a1dfe.jpeg)
index6.png
继续改造about和contact,分别添加跳转按钮。
{{!-- app/templates/about.hbs --}}
About Super Rentals
The Super Rentals website is a delightful project created to explore Ember. By building a property rental site, we can simultaneously imagine traveling AND building Ember applications.
Contact Us {{!-- 增加一个跳转回到首页的链接 --}} Index
{{!-- app/templates/contact.hbs --}}
Contact Us
Super Rentals Representatives would love to help you
choose a destination or answer any questions you may have.
Super Rentals HQ
1212 Test Address Avenue
Testington, OR 97233
+1 (503) 555-1212
superrentalsrep@emberjs.com About {{!-- 增加一个跳转回到首页的链接 --}} Index
在about和contact两个页面添加了两个跳转按钮,一个是about和contact页面的相互跳转,一个是跳转回首页的按钮。
![52482bf801cb1c0cbb9e9ed1f2f080ae.png](https://i-blog.csdnimg.cn/blog_migrate/ded33bd79534c61da6b72f521f525946.jpeg)
about3.png
![933109c9ed28bc2028a981a032b1f839.png](https://i-blog.csdnimg.cn/blog_migrate/4a143b35dfc631108decf15cd5225baf.jpeg)
contact4.png
通过前面的这三个页面,相信你很容易就可以掌握组件的使用。其中@route属性指定的是你定义的路由名字,这个路由的名字要和router.js里面的定义的完全一致,否则会找不到。另外需要注意的是@route属性的值一定是路由的名字而不是URL的名字,比如contact路由,这个路由的路由名是contact而不是访问的getting-in-touch。
另外在组件上可以使用普通的HTML属性,比如上面使用的class属性,这个class属性就是普通HTML属性,用于指定CSS样式的。在Ember应用中,通过@符号区别是普通的HTML属性还是Ember提供的属性,比如上面使用的@route就是Ember提供的属性。
在底层,组件会为我们生成一个常规的标签,并带有针对特定路由的href。通过Ember生成的这个标签对于用户来说非常友好,无需页面刷新就可以实现跳转。 简单讲,当单击这些特殊链接之一时,Ember将拦截该单击,呈现新页面的内容,并更新URL(所有这些操作均在本地执行,而无需等待服务器),从而避免刷新整个页面。