篇，你可以学到Ember页面的创建，并且在不同的页面之间跳转。新建两个页面，一个是创建about页面，一个是创建contact页面。

看完本篇你将学到如下知识点：

• 定义路由
• 使用路由模板
• 自定义路由URL
• 使用<LinkTo>组件在不同模板之间跳转
• 组件之间传递参数、属性

定义路由

在前一篇，我们定义了一个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 about

installing route

  create app/routes/about.js

  create app/templates/about.hbs

updating router

  add route about

installing 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 --}}

<div class="jumbo">
  <div class="right tomster"></div>
  <h2>About Super Rentals</h2>
  <p>
    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.
  </p>
</div>

浏览器访问验证：http://localhost:4200/about。可以看到about页面的内容

使用同样的方式创建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 contact

installing route

  create app/routes/contact.js

  create app/templates/contact.hbs

updating router

  add route contact

installing route-test

  create tests/unit/routes/contact-test.js

在contact.hbs添加一些HTML内容。

{{!-- app/templates/contact.hbs --}}
<div class="jumbo">
  <div class="right tomster"></div>
  <h2>Contact Us</h2>
  <p>
    Super Rentals Representatives would love to help you<br>
    choose a destination or answer any questions you may have.
  </p>
  <address>
    Super Rentals HQ
    <p>
      1212 Test Address Avenue<br>
      Testington, OR 97233
    </p>
    <a href="tel:503.555.1212">+1 (503) 555-1212</a><br>
    <a href="mailto:superrentalsrep@emberjs.com">superrentalsrep@emberjs.com</a>
  </address>
</div>

浏览器访问验证：http://localhost:4200/contact。可以看到contact页面的内容

自定义路由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就会发现报错了，提示找不到这个路由了。

再访问http://localhost:4200/getting-in-touch。可以看到页面的内容就是之前contact的内容。

使用<LinkTo>组件在不同模板之间跳转

<LinkTo>是Ember提供好的组件，用于在不同模板之间跳转，其作用类似于HTML标签中的<a>标签。

为何不直接用<a>标签而是要自定义一个跳转的组件呢？？因为使用普通的<a>标签，当你点击链接的时候会发送浏览器的刷新，但是Ember是单页应用不需要刷新整个页面，只要是实现页面的跳转即可（所谓的跳转其实就是实现不同的路由之间的切换，并且不会刷新页面）。

继续改造前面的创建的index,about和contact。分别在这两个模板页面中添加一个跳转的链接。

{{!-- index.hbs是 "/" 这个路径默认的页面。 --}}

<div class="jumbo">
  <div class="right tomster"></div>
  <h2>Welcome to Super Rentals!</h2>
  <p>We hope you find exactly what you're looking for in a place to stay.</p>
  
  {{!-- 使用LinkTo组件添加一个跳转按钮，并且指定调整到的路由是about，也就是说当用户点击这按钮的时候会跳转到about这个子页面上 --}}
  <LinkTo @route="about" class="button">About Us</LinkTo>
  

  
  <a href="/about" class="button">About Us With A Tag</a>
</div>

点击“About Us”这个按钮，然后看浏览器的地址栏，可以看到自动转到about这个路由下，并且页面不会刷新。为了验证前面所说的效果，我在About Us后面添加了一个<a>标签按钮，当你点击这个链接的时候会看到浏览器自动刷新了，并且也跳转到about页面上。

继续改造about和contact，分别添加跳转按钮。

{{!-- app/templates/about.hbs --}}
<div class="jumbo">
  <div class="right tomster"></div>
  <h2>About Super Rentals</h2>
  <p>
    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.
  </p>
  
  <LinkTo @route="contact" class="button">Contact Us</LinkTo>
  {{!-- 增加一个跳转回到首页的链接 --}}
  <LinkTo @route="index" class="button">Index</LinkTo>
</div>

{{!-- app/templates/contact.hbs --}}
<div class="jumbo">
  <div class="right tomster"></div>
  <h2>Contact Us</h2>
  <p>
    Super Rentals Representatives would love to help you<br>
    choose a destination or answer any questions you may have.
  </p>
  <address>
    Super Rentals HQ
    <p>
      1212 Test Address Avenue<br>
      Testington, OR 97233
    </p>
    <a href="tel:503.555.1212">+1 (503) 555-1212</a><br>
    <a href="mailto:superrentalsrep@emberjs.com">superrentalsrep@emberjs.com</a>
  </address>
  
  <LinkTo @route="about" class="button">About</LinkTo>
  {{!-- 增加一个跳转回到首页的链接 --}}
  <LinkTo @route="index" class="button">Index</LinkTo>
</div>

在about和contact两个页面添加了两个跳转按钮，一个是about和contact页面的相互跳转，一个是跳转回首页的按钮。

通过前面的这三个页面，相信你很容易就可以掌握<LinkTo>组件的使用。其中@route属性指定的是你定义的路由名字，这个路由的名字要和router.js里面的定义的完全一致，否则会找不到。另外需要注意的是@route属性的值一定是路由的名字而不是URL的名字，比如contact路由，这个路由的路由名是contact而不是访问的getting-in-touch。

另外在<LinkTo>组件上可以使用普通的HTML属性，比如上面使用的class属性，这个class属性就是普通HTML属性，用于指定CSS样式的。在Ember应用中，通过@符号区别是普通的HTML属性还是Ember提供的属性，比如上面使用的@route就是Ember提供的属性。

在底层，<LinkTo>组件会为我们生成一个常规的<a>标签，并带有针对特定路由的href。通过Ember生成的这个<a>标签对于用户来说非常友好，无需页面刷新就可以实现跳转。 简单讲，当单击这些特殊链接之一时，Ember将拦截该单击，呈现新页面的内容，并更新URL（所有这些操作均在本地执行，而无需等待服务器），从而避免刷新整个页面。

信

51rgb

网页自动跳转页面的代码在很多时候都非常的有用，下面的是两个简单的例子。仅供参考。

方案一，用<meta>里直接写刷新语句：

<html>

<head>

<meta http-equiv="Content-Language" content="zh-CN">

<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb2312">

<meta http-equiv="refresh" content="5;url=http://www.51rgb.com">

<title>html网页自动跳转代码--西农大网站</title>

</head>

<body>

测试：html网页自动跳转代码<br/>

你可以在这里写下你想的一切东西！<br />

如：西北农林科技大学是一所985、211院校。<br />

</body></html>

方案二，用javascript脚本来跳转

<html><head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>正在进入西农大网站</title>

</head>

<body>

<form name=loading>

<p align=center> <font color="#0066ff" size="2">正在进入，请稍等</font><font color="#0066ff" size="2" face="Arial">...</font>

<input type=text name=chart size=46 style="font-family:Arial; font-weight:bolder; color:#0066ff; background-color:#fef4d9; padding:0px; border-style:none;">

<inputtype=text name=percent size=47 style="color:#0066ff; text-align:center; border-width:medium; border-style:none;">

<script>

var bar=0

var line="||"

var amount="||"

count

function count{

bar=bar+2

amount =amount + line

document.loading.chart.value=amount

document.loading.percent.value=bar+"%"

if (bar<99)

{setTimeout("count",100);}

else

{window.location =http://www.51rgb.com;}

}</script>

</p>

</form><p align="center">

测试：html网页自动跳转代码<br/>

你可以在这里写下你想的一切东西！<br />

如：西北农林科技大学是一所985、211院校。<br /><br />

如果您的浏览器不支持跳转,<astyle="text-decoration: none" href="http://www.mycodes.net

"><font color="#FF0000">请点这里</font></a>.</p>

</body>

</html>

↓↓↓

人人都是产品经理【起点学院】，BAT实战派产品总监手把手系统带你学产品、学运营。

产品设计时细节是产品经理最头疼的问题，一个button，一个链接都要考虑太多的细节问题。作者整理了常见的一些功能设计问题，一篇文章看懂这些功能设计。来学习吧。

定义

链接也称为超链接，所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。而在一个网页中用来超链接的对象，可以是一段文本或者是一个图片。当浏览者单击已经链接的文字或图片后，链接目标将显示在浏览器上，并且根据目标的类型来打开或运行。

样式

链接可以是一个字或是一段字这样的文本，也可以是一个按钮，一张图片，当你点击后跳转到另一个目标，当你把鼠标指针移到某个链接时会变成一个小手，当然在手机上没有这一特点。

1. 文本样式的链接

文本样式的链接一般在搜索引擎的网站呈现蓝色字样，大多会在下面加上下划线以便识别，不过现如今考虑到不影响文本的可读性与用户体验，逐渐取消了下划线。而在一些别的网站考虑到界面设计风格各方面的因素而不用蓝色。

谷歌的文本链接是蓝色，没有下划线

百度的文本链接也是蓝色，关键词是红色，有下划线

而京东的文本链接有灰色，有白色，有黑色

2. 按钮样式的链接

按钮样式的链接比文本样式的更容易识别，每一个按钮都是一样链接。

按钮样式链接

3. 图片样式的链接

图片样式的链接可以是单独的一张图片，也可以是文字与按钮一起组成一张图片，只是鼠标指针扫过图片的任何一个部位都会变成小手。

如桌面弹出这种游戏小窗口的图片式链接

由文字/图/按钮样式一起构成的一张图片式按钮，鼠标可以点击图中任何一部位

打开方式

链接打开的方式有三种：第一种是在当前页面刷新跳转，国外的网站大多是这样的打开式；第二种是在新标签页面打开链接，国内大多采用这种；第三种是提示用APP打开。当然现在出现了一种新的打开方式，那就是二维码扫描。

提示用美拍APP打开

类型

按照连接路径的不同，网页中超链接一般分为以下3种类型：内部链接，锚点链接和外部链接。

链接还可以分为动态链接和静态链接。动态超链接指的是可以通过改变HTML代码来实现动态变化的链接，例如我们可以实现将鼠标移动到某个文字链接上，文字就会象动画一样动起来或改变颜色的效果，也可以实现鼠标移到图片上图片就产生反色或朦胧等等的效果。而静态链接，顾名思义，就是没有动态效果的链接。

1. 内部链接

与外部链接（即反向链接）相反，内部链接是指同一网站域名下的内容页面之间互相链接。如频道、栏目、终极内容页之间的链接，乃至站内关键词之间的Tag链接都可以归类为内部链接，因此内部链接我们也可以称之为站内链接，对内部链接的优化其实就是对网站的站内链接的优化。

2. 锚点链接

HTML中的链接，正确的说法应该称作"锚点"，它命名锚点链接（也叫书签链接）常常用于那些内容庞大繁琐的网页，通过点击命名锚点，不仅让我们能指向文档，还能指向页面里的特定段落，更能当作"精准链接"的便利工具，让链接对象接近焦点。便于浏览者查看网页内容。类似于我们阅读书籍时的目录页码或章回提示。在需要指定到页面的特定部分时，标记锚点是最佳的方法。

3. 外部链接

外部链接，又常被称为：“反向链接”或“导入链接”，是指通过其他网站链接到你的网站的链接。

外部链接指的是针对搜索引擎，与其它站点所做的友情链接。高质量的外部链接指：和你的网站建立链接的网站知名度高，访问量大，同时相对的外部链接较少，有助于快速提升你的网站知名度和排名的其他网站的友情链接。

如果按照使用对象的不同，网页中的链接又可以分为：文本超链接，图像超链接，E-mail链接，锚点链接，多媒体文件链接，空链接等。

链接是一种对象，它以特殊编码的文本或图形的形式来实现链接，如果单击该链接，则相当于指示浏览器移至同一网页内的某个位置，或打开一个新的网页，或打开某一个新的WWW网站中的网页。

链接状态

链接在交互上一般会呈现4种状态，即默认状态/悬停时状态/点击时状态/点击后状态。比如谷哥网站的交互体验。如下图：

点击前

悬停时，下面浮现半透明线条

点击时，有波纹晕开的动态效果

点击后，下面线条粗

有时候是3种状态，比如百度网和知乎应用：

默认状态

点击时链接变红

点击后链接变成紫色

IOS系统知乎应用的3种状态，而在Android系统没有用力点击这一状态。

默认状态

点击状态

用力点击会弹出预览小窗口

有些时候只有2种状态，如下图谷歌网：

默认和点击后状态一样

鼠标悬停时出现下划线

默认状态

点击时

而有时候比如在APP里有时候就一直只有一种状态，也可以称静态链接，之前的可以称之为动态链接。在不同的使用场景会因为当时的情况选择最合适的交互体验设计。有的情况下还会加上点击的音效，使用户体验更畅快，这在移动端用的使用情况多一些。

总之链接是网页不可缺少的构成部分，每一个链接的呈现都是经过深思熟虑的。

作者：潘瑶琼（简书作者）

本文由 @潘瑶琼 授权发布于人人都是产品经理，未经作者许可，禁止转载。