Nuxt.js從0到1之入門教程

外話：近來想把網站做下更新，從框架到內容的更新，但又不想放棄SEO的優勢，日常工作用到vue.js在SEO方面劣勢較多，果斷選擇了Nuxt.js，苦于國內文章抄襲的非常嚴重如某n 某書，最終在稀土找到一篇像樣的文章，以頭條為平臺記錄網站改版全過程。

此文章建議在PC端查看，涉及到代碼部分，移動端查看確實不方便

Nuxt.js 概要

簡而言之，Nuxt.js是幫助Vue.js輕松完成服務端渲染工作的框架。Nuxt.js預設了服務端渲染所需要的各種配置，如異步數據，中間件，路由。它好比是 Angular Universal 之于 Angular， Next.js 之于 React。

如Nuxt.js文檔所說，通過對客戶端/服務端基礎架構的抽象，Nuxt.js 讓開發者專注于頁面的UI渲染。

靜態文件生成器

Nuxt.js的一個重要功能是，通過 generate 命令，生成靜態站點。類似于流行的靜態生成工具Jekyll。

Nuxt.js 內部依賴

除了Vue.js 2.0之外，Nuxt.js集成了如下模塊: Vue-Router, Vue-Meta 和 Vuex (僅在使用 Vuex 狀態樹配置項時引入)。這樣的好處在于，不需要手工配置依賴，不需要同時在客戶端和服務端配置相同的庫。 Nuxt.js在包含如上依賴的情況下，總大小仍然保持在 28kb min+gzip (如果使用了 Vuex 特性的話為 31kb)。

另外，Nuxt.js 使用 Webpack 和 vue-loader 、 babel-loader 來處理代碼的自動化構建工作（如打包、代碼分層、壓縮等等）。

工作原理

當你訪問一個基于Nuxt.js構建的頁面時，發生了的事情如下：

當用戶訪問應用程序, 如果store中定義了 nuxtServerInit action，Nuxt.js將調用它更新store。
接下來，將加載即將訪問頁面所依賴的任何中間件。Nuxt首先從nuxt.config.js這個文件中，加載全局依賴的中間件，之后檢測每個相應頁面對應的布局文件，最后，檢測布局文件下子組件依賴的中間件。以上是中間件的加載順序。
如果要訪問的路由是一個動態路由, 且有一個相應的 validate() 方法路由的validate 方法，將進行路由校驗。
之后, Nuxt.js 調用 asyncData() 和 fetch() 方法，在渲染頁面之前加載異步數據。asyncData() 方法用于異步獲取數據，并將fetch回來的數據，在服務端渲染到頁面。用fetch() 方法取回的將數據在渲染頁面之前填入store。
最后一步, 將所有數據渲染到頁面。

下圖闡述了 Nuxt.js 應用一個完整的服務器請求渲染的流程，摘自官網：

使用 Nuxt.js 創建一個靜態網站

下面讓我們動手創建一個基于Nuxt.js簡單的靜態博客。我們的發送的請求，返回 mock 的JSON數據。

完成下面的例子，你需要了解基礎的 vue.js 知識。如果你是個新手，你可以通過Jack Franklin的getting started guide了解 Vue.js 2.0。同時，我將使用ES6語法，你可以參考www.sitepoint.com/tag/es6/ 重溫ES6語法。

我們的 Demo 最終效果如下:

本文中代碼可參照 GitHub, demo 地址如下：https://github.com/sitepoint-editors/nuxt-ssr-blog/

基礎配置

開始使用 Nuxt.js 最簡單的方式就是使用 Nuxt.js 團隊自己開發的腳手架。我們可以使用 vue-cli 快速創建我們的項目 (ssr-blog)：

`vue init nuxt/starter ssr-blog`
# 提示： 如果你沒有安裝過vue-cli，請先通過npm install -g vue-cli 命令安裝vue-cli。

# 之后，我們將安裝項目的依賴
cd ssr-blog
npm install

# 現在我們啟動程序:
`npm run dev`

# 如果正確啟動, 你能訪問 http://localhost:3000 
# 展示的頁面是 Nuxt.js 模板的初始頁面
# 你也可以通過查看頁面源代碼，驗證頁面所展示的一切內容，都是服務端渲染好的。

下面，我們簡單配置下 nuxt.config.js，包含以下選項：

// ./nuxt.config.js

module.exports={
  /*
   * Headers of the page
   */
  head: {
    titleTemplate: '%s | Awesome JS SSR Blog',
    // ...
    link: [
      // ...
      { 
        rel: 'stylesheet', 
        href: 'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.2/css/bulma.min.css' 
      }
    ]
  },
  // ...
}

在如上配置文件下，我們使用 titleTemplate 字段 title 變量指定文章題目，在渲染之前用title變量值替換掉%s這個占位，填充到titleTemplate 。

同時，我也使用了 CSS 框架, Bulma, 預設一些樣式。通過 link 配置項。

提示： Nuxt.js使用 vue-meta 更新我們的 html headers 信息。所以，我們可以看看 meta 具體的配置項，優化頁面 html 信息。

現在，我們可以通過幾個步驟，完成博客的頁面和功能。

使用 Layouts

首先，我們將為我們所有的頁面定義一個通用的基本布局。我們通過修改 layouts/default.vue 文件，更新 main Nuxt.js layout：

<!-- ./layouts/default.vue -->

<template>
  <div>
    <!-- navigation -->
    <nav class="nav has-shadow">
      <div class="container">
        <div class="nav-left">
          <nuxt-link to="/" class="nav-item">
            Awesome JS SSR Blog!
          </nuxt-link>
          <nuxt-link active-class="is-active" to="/" class="nav-item is-tab" exact>Home</nuxt-link>
          <nuxt-link active-class="is-active" to="/about" class="nav-item is-tab" exact>About</nuxt-link>
        </div>
      </div>
    </nav>
    <!-- /navigation -->

    <!-- displays the page component -->
    <nuxt/>

  </div>
</template>

在我們通用的布局里，我們僅僅對頁面添加導航欄，我們通過 component進一步完成具體頁面模塊的定制。你可以查看components-nuxt-link 進一步了解。

在創建布局時component非常重要，它決定具體頁面展示的元素。

當然，component也可以做更多事情，比如定義通用組件和錯誤頁面，但是我們的博客很簡單，不需要這些功能。強烈建議閱讀 Nuxt.js documentation on views ，你可以通過這篇文章了解更多 Nuxt.js 特性。

簡單的頁面和路由

Nuxt.js 頁面是以單文件組件形式組織目錄結構。 Nuxt.js 自動找到目錄下每個 .vue 文件，并添加到頁面中。

創建博客主頁

我們可以通過修改 index.vue 文件修改主頁，通過 Nuxt.js 創建的文件如下：

<!-- ./pages/index.vue -->
<template>
  <div>
    <section class="hero is-medium is-primary is-bold">
      <div class="hero-body">
        <div class="container">
          <h1 class="title">
            Welcome to the JavaScript SSR Blog.
          </h1>
          <h2 class="subtitle">
            Hope you find something you like.
          </h2>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
  export default {
    head: {
      title: 'Home'
    }
  }
</script>

如前所述，在渲染之前，題目將自動填充至文件。

我們現在可以刷新頁面，看看主頁的變化。

創建 About 頁面

Nuxt.js 還有一個優秀的特性，監聽文件夾下文件的更改，所以，在文件更改時，不需要重啟應用更新。

來，我們添加一個簡單的 about.vue 頁面：

<!-- ./pages/about.vue -->
<template>
  <div class="main-content">
    <div class="container">
      <h2 class="title is-2">About this website.</h2>
      <p>Curabitur accumsan turpis pharetra <strong>augue tincidunt</strong> blandit. Quisque condimentum maximus mi, sit amet commodo arcu rutrum id. Proin pretium urna vel cursus venenatis. Suspendisse potenti. Etiam mattis sem rhoncus lacus dapibus facilisis. Donec at dignissim dui. Ut et neque nisl.</p>
      <br>
      <h4 class="title is-4">What we hope to achieve:</h4>
      <ul>
        <li>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</li>
        <li>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</li>
        <li>Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.</li>
        <li>Ut non enim metus.</li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  head: {
    title: 'About'
  }
}
</script>

現在我們訪問 http://localhost:3000/about 看看about頁面，無需重啟，非常方便。

在主頁展示文章列表

我們的首頁在沒有內容的時候展示如上, 所以下一步，我們要在 index.vue 上添加博客列表這個組件。

首先，我們需要把 JSON 格式的文章保存在服務根目錄下。文件可以從這里下載，或者你可以復制下面的 JSON 到根目錄文件夾 posts.json 下:

[
    {
        "id": 4,
        "title": "Building universal JS apps with Nuxt.js",
        "summary": "Get introduced to Nuxt.js, and build great SSR Apps with Vue.js.",
        "content": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>",
        "author": "Jane Doe",
        "published": "08:00 - 07/06/2017"
    },
    {
        "id": 3,
        "title": "Great SSR Use cases",
        "summary": "See simple and rich server rendered JavaScript apps.",
        "content": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>",
        "author": "Jane Doe",
        "published": "17:00 - 06/06/2017"
    },
    {
        "id": 2,
        "title": "SSR in Vue.js",
        "summary": "Learn about SSR in Vue.js, and where Nuxt.js can make it all faster.",
        "content": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>",
        "author": "Jane Doe",
        "published": "13:00 - 06/06/2017"
    },
    {
        "id": 1,
        "title": "Introduction to SSR",
        "summary": "Learn about SSR in JavaScript and how it can be super cool.",
        "content": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>",
        "author": "John Doe",
        "published": "11:00 - 06/06/2017"
    }
]

提示：理想情況下，我們應該從通過 API 獲取文章數據。

components 存放在 components 文件夾下，我們可以創建如下組件：

<!-- ./components/Posts.vue -->
<template>
  <section class="main-content">
    <div class="container">
      <h1 class="title has-text-centered">
        Recent Posts.
      </h1>
      <div class="columns is-multiline">
        <div class="column is-half" v-for="post in posts">
          <div class="card">
           <header class="card-header">
            <p class="card-header-title">
              {{ post.title }}
            </p>
          </header>
          <div class="card-content">
            <div class="content">
              {{ post.summary }}
              <br>
              <small>
                by <strong>{{ post.author}}</strong> 
                \\ {{ post.published }}
              </small>
            </div>
          </div>
          <footer class="card-footer">
            <nuxt-link :to="`/post/${post.id}`" 
              class="card-footer-item">
              Read More
            </nuxt-link>
          </footer>
        </div>
      </div>
    </div>
  </div>
</section>
</template>

<script>
  import posts from '~/posts.json'

  export default {
    name: 'posts',
    data () {
      return { posts }
    }
  }
</script>

我們引入 JSON 文件充當異步數據，通過 v-for 指令循環列表，取出我們需要的屬性填充進組件模板展示。

提示： ~ 符號是 / 的別名。你可以查看這篇文檔了解更具體的用法。

下面，我們添加 component 到主頁：

<!-- ./pages/index.vue -->
<template>
<div>
    <!-- ... -->
    <posts />
</div>
</template>

<script>
import Posts from '~components/Posts.vue'

export default {
  components: {
    Posts
  },
  // ...
}
</script>

添加動態路由

現在，我們為文章頁配置動態路由，我們以 /post/1 為例：

為此，我們添加 post 文件夾到 pages 目錄下，如下：

pages
└── post
    └── _id
        └── index.vue

我們的程序生成相應的動態路由：

router: {
  routes: [
    // ...
    {
      name: 'post-id',
      path: '/post/:id',
      component: 'pages/post/_id/index.vue'
    }
  ]
}

更新單一發布文件：

<!-- ./pages/post/_id/index.vue -->
<template>
  <div class="main-content">
    <div class="container">
      <h2 class="title is-2">{{ post.title }}</h2>
      <div v-html="post.content"></div>
      <br>
      <h4 class="title is-5 is-marginless">by <strong>{{ post.author }}</strong> at <strong>{{ post.published }}</strong></h4>
    </div>
  </div>
</template>

<script>
  // import posts saved JSON data
  import posts from '~/posts.json'

  export default {
    validate ({ params }) {
      return /^\d+$/.test(params.id)
    },
    asyncData ({ params }, callback) {
      let post=posts.find(post=> post.id===parseInt(params.id))
      if (post) {
        callback(null, { post })
      } else {
        callback({ statusCode: 404, message: 'Post not found' })
      }
    },
    head () {
      return {
        title: this.post.title,
        meta: [
          {
            hid: 'description',
            name: 'description',
            content: this.post.summary
          }
        ]
      }
    }
  }
</script>

Nuxt.js通過添加通用方法，簡化開發流程。看看我們應該如何在單文件應用中使用它。

路由校驗可以通過路由校驗方法 validate 校驗路由。如果我們的驗證路由參數驗證數字，如果驗證失敗，將自動跳轉到404頁面。如果它返回“false”,Nuxt。js將自動加載404錯誤頁面。想看更多，請查看Nuxt官網。
asyncData 方法用于 fetch 數據，并在服務端渲染頁面，返回給瀏覽器。它可以通過多種方式返回數據。我們可以通過多種方式返回數據。在本文中的例子里，我們使用回調函數返回頁面。我們使用一個回調函數來返回相同的帖子“id”屬性“id”參數的路線。
正如我們之前看到的,我們使用head 的方法來設置頁面 header 。這時，我們改變頁面你的 title ，添加頁面信息到具體頁面。

現在我們可以再次訪問我們的博客看到所有路線和頁面正常工作，并查看頁面源代碼生成的HTML。我們有一個服務器端JavaScript應用程序呈現功能。

生成靜態文件

接下來，我們要生成程序的 HTML 靜態文件。

我們需要對 Nuxt.js 做一個小修改，Nuxt.js 默認忽略動態路由。為了生成動態路由文件，我們需要修改 ./nuxt.config.js

我們使用回調函數，返回以后包含動態路由的列表：

// ./nuxt.config.js

module.exports={
  // ...
  generate: {
    routes(callback) {
      const posts=require('./posts.json')
      let routes=posts.map(post=> `/post/${post.id}`)
      callback(null, routes)
    }
  }
}

如果你想查看全部關于 generate 的配置，可以參照這篇文檔。

運行如下命令，生成全部頁面：

`npm run generate`

Nuxt 將所有生成的頁面放到 dist 文件夾下。

使用 Nginx 部署

最后一步，可以使用 Nginx 進行部署，nginx的安裝過程此文不再贅述。

結論

generate 命令來生成我們頁面的靜態文件，假如，我們需要回復。

下一期講，改版中的踩坑問題。

氣這么冷，大家都多穿點衣服哦，不用只講風度，不要溫度哦！

前言

小程序如何返回到上一個頁面，并刷新頁面呢？這樣的需求很常見，比如：訂單詳情頁面，訂單狀態是“已付款”，這時候發起“退款”，跳轉到申請退款頁面，申請成功后，返回到訂單詳情，這時候的訂單狀態是不是要變為“退款中”的狀態？

微信小程序如何返回到上一個頁面，并刷新頁面呢？

在普通的html頁面，很簡單，不用操作都可以實現。因為瀏覽器返回會自動刷新。但是小程序返回是不會自動刷新上一個頁面的。所以需要一點點技巧。

下面還是模擬上面的場景。

申請退款頁

發起申請退款后，我們用wx.navigateBack()返回到訂單詳情頁面，小程序API有詳情說明。

關閉當前頁面，返回上一頁面或多級頁面。可通過 getCurrentPages() 獲取當前的頁面棧，決定需要返回幾層。參數說明：

微信小程序如何返回到上一個頁面，并刷新頁面呢？

訂單詳情頁

重點來了，拋開上面的需求，我們就查詢訂單詳情接口

onLoad(options){ 
 let orderId=options.orderId; 
 // 根據orderId查詢訂單詳情數據 
 wx.request({ 
 url: 'xxxxxx', // 接口地址 
 data: { 
 orderId: orderId 
 }, 
 header: { 
 'content-type': 'application/json' // 默認值 
 }, 
 success(res) { 
 console.log(res.data) 
 } 
 }) 
}

如果就這樣，那頁面返回并不執行onLoad函數，所以就不會獲取新的數據，來更新狀態。

我們找到了onShow函數(生命周期回調 — 用于監聽頁面顯示)Page(Object) 構造器詳細說明

返回時，onShow是會執行的，所以改造上面方法

data: { 
 orderId: '' 
}, 
onShow() { 
 // 獲取data里面存的orderId 
 let orderId=this.data.orderId; 
 wx.request({ 
 url: 'xxxxxx', // 接口地址 
 data: { 
 orderId: orderId 
 }, 
 header: { 
 'content-type': 'application/json' // 默認值 
 }, 
 success(res) { 
 console.log(res.data) 
 } 
 }) 
}, 
onLoad(options){ 
 let orderId=options.orderId; 
 // 向data里面set orderId 
 this.setData({ 
 orderId: orderId 
 }) 
}

onLoad把參數存起來，這個參數options是訂單列表，或者其他頁面帶入的。從申請退款頁返回，是不用參數的，返回onShow 執行需要的orderId是原來已經緩存的。然后onShow直接用這個參數，onShow是獲取不到url參數的。

小提示

小程序開發中，如果用到倒計時，當退出小程序，或者，按手機home鍵，倒計時不會繼續執行。比如，到時間是30s，你按了home鍵，過了10s，再進入小程序，倒計時不是是20s，依舊會從30s倒計時。所以，也需要用到onShow，來刷新這個倒計時。這也是小程序退出，重新進入不會執行onLoad函數的問題。

公告

喜歡小編的點擊關注，了解更多知識！

源碼地址請點擊下方“了解更多”

人人都是產品經理【起點學院】，BAT實戰派產品總監手把手系統帶你學產品、學運營。

產品設計時細節是產品經理最頭疼的問題，一個button，一個鏈接都要考慮太多的細節問題。作者整理了常見的一些功能設計問題，一篇文章看懂這些功能設計。來學習吧。

定義

鏈接也稱為超鏈接，所謂的超鏈接是指從一個網頁指向一個目標的連接關系，這個目標可以是另一個網頁，也可以是相同網頁上的不同位置，還可以是一個圖片，一個電子郵件地址，一個文件，甚至是一個應用程序。而在一個網頁中用來超鏈接的對象，可以是一段文本或者是一個圖片。當瀏覽者單擊已經鏈接的文字或圖片后，鏈接目標將顯示在瀏覽器上，并且根據目標的類型來打開或運行。

樣式

鏈接可以是一個字或是一段字這樣的文本，也可以是一個按鈕，一張圖片，當你點擊后跳轉到另一個目標，當你把鼠標指針移到某個鏈接時會變成一個小手，當然在手機上沒有這一特點。

1. 文本樣式的鏈接

文本樣式的鏈接一般在搜索引擎的網站呈現藍色字樣，大多會在下面加上下劃線以便識別，不過現如今考慮到不影響文本的可讀性與用戶體驗，逐漸取消了下劃線。而在一些別的網站考慮到界面設計風格各方面的因素而不用藍色。

谷歌的文本鏈接是藍色，沒有下劃線

百度的文本鏈接也是藍色，關鍵詞是紅色，有下劃線

而京東的文本鏈接有灰色，有白色，有黑色

2. 按鈕樣式的鏈接

按鈕樣式的鏈接比文本樣式的更容易識別，每一個按鈕都是一樣鏈接。

按鈕樣式鏈接

3. 圖片樣式的鏈接

圖片樣式的鏈接可以是單獨的一張圖片，也可以是文字與按鈕一起組成一張圖片，只是鼠標指針掃過圖片的任何一個部位都會變成小手。

如桌面彈出這種游戲小窗口的圖片式鏈接

由文字/圖/按鈕樣式一起構成的一張圖片式按鈕，鼠標可以點擊圖中任何一部位

打開方式

鏈接打開的方式有三種：第一種是在當前頁面刷新跳轉，國外的網站大多是這樣的打開式；第二種是在新標簽頁面打開鏈接，國內大多采用這種；第三種是提示用APP打開。當然現在出現了一種新的打開方式，那就是二維碼掃描。

提示用美拍APP打開

類型

按照連接路徑的不同，網頁中超鏈接一般分為以下3種類型：內部鏈接，錨點鏈接和外部鏈接。

鏈接還可以分為動態鏈接和靜態鏈接。動態超鏈接指的是可以通過改變HTML代碼來實現動態變化的鏈接，例如我們可以實現將鼠標移動到某個文字鏈接上，文字就會象動畫一樣動起來或改變顏色的效果，也可以實現鼠標移到圖片上圖片就產生反色或朦朧等等的效果。而靜態鏈接，顧名思義，就是沒有動態效果的鏈接。

1. 內部鏈接

與外部鏈接（即反向鏈接）相反，內部鏈接是指同一網站域名下的內容頁面之間互相鏈接。如頻道、欄目、終極內容頁之間的鏈接，乃至站內關鍵詞之間的Tag鏈接都可以歸類為內部鏈接，因此內部鏈接我們也可以稱之為站內鏈接，對內部鏈接的優化其實就是對網站的站內鏈接的優化。

2. 錨點鏈接

HTML中的鏈接，正確的說法應該稱作"錨點"，它命名錨點鏈接（也叫書簽鏈接）常常用于那些內容龐大繁瑣的網頁，通過點擊命名錨點，不僅讓我們能指向文檔，還能指向頁面里的特定段落，更能當作"精準鏈接"的便利工具，讓鏈接對象接近焦點。便于瀏覽者查看網頁內容。類似于我們閱讀書籍時的目錄頁碼或章回提示。在需要指定到頁面的特定部分時，標記錨點是最佳的方法。

3. 外部鏈接

外部鏈接，又常被稱為：“反向鏈接”或“導入鏈接”，是指通過其他網站鏈接到你的網站的鏈接。

外部鏈接指的是針對搜索引擎，與其它站點所做的友情鏈接。高質量的外部鏈接指：和你的網站建立鏈接的網站知名度高，訪問量大，同時相對的外部鏈接較少，有助于快速提升你的網站知名度和排名的其他網站的友情鏈接。

如果按照使用對象的不同，網頁中的鏈接又可以分為：文本超鏈接，圖像超鏈接，E-mail鏈接，錨點鏈接，多媒體文件鏈接，空鏈接等。

鏈接是一種對象，它以特殊編碼的文本或圖形的形式來實現鏈接，如果單擊該鏈接，則相當于指示瀏覽器移至同一網頁內的某個位置，或打開一個新的網頁，或打開某一個新的WWW網站中的網頁。

鏈接狀態

鏈接在交互上一般會呈現4種狀態，即默認狀態/懸停時狀態/點擊時狀態/點擊后狀態。比如谷哥網站的交互體驗。如下圖：

點擊前

懸停時，下面浮現半透明線條

點擊時，有波紋暈開的動態效果

點擊后，下面線條粗

有時候是3種狀態，比如百度網和知乎應用：

默認狀態

點擊時鏈接變紅

點擊后鏈接變成紫色

IOS系統知乎應用的3種狀態，而在Android系統沒有用力點擊這一狀態。

默認狀態

點擊狀態

用力點擊會彈出預覽小窗口

有些時候只有2種狀態，如下圖谷歌網：

默認和點擊后狀態一樣

鼠標懸停時出現下劃線

默認狀態

點擊時

而有時候比如在APP里有時候就一直只有一種狀態，也可以稱靜態鏈接，之前的可以稱之為動態鏈接。在不同的使用場景會因為當時的情況選擇最合適的交互體驗設計。有的情況下還會加上點擊的音效，使用戶體驗更暢快，這在移動端用的使用情況多一些。

總之鏈接是網頁不可缺少的構成部分，每一個鏈接的呈現都是經過深思熟慮的。

作者：潘瑤瓊（簡書作者）

本文由 @潘瑤瓊授權發布于人人都是產品經理，未經作者許可，禁止轉載。

在線咨詢

上一篇：一周互聯網參會指南（8.11-8.16）
下一篇：HTML5新技術給網站帶來了哪些改變

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

Nuxt.js從0到1之入門教程

Nuxt.js 概要

靜態文件生成器

Nuxt.js 內部依賴

工作原理

使用 Nuxt.js 創建一個靜態網站

基礎配置

使用 Layouts

簡單的頁面和路由

創建博客主頁

創建 About 頁面

在主頁展示文章列表

添加動態路由

生成靜態文件

使用 Nginx 部署

結論

前言

申請退款頁

訂單詳情頁

小提示

公告

定義

樣式

1. 文本樣式的鏈接

2. 按鈕樣式的鏈接

3. 圖片樣式的鏈接

打開方式

類型

1. 內部鏈接

2. 錨點鏈接

3. 外部鏈接

鏈接狀態

您的項目需求