編寫 src/utils/index.js 檔案

直接給程式碼如下：

export default {
  goodTime (str) {
    let now = new Date().getTime()
    let oldTime = new Date(str).getTime()
    let difference = now - oldTime
    let result = ''
    let minute = 1000 * 60
    let hour = minute * 60
    let day = hour * 24
    let month = day * 30
    let
 
 year = month * 12
    let _year = difference / year
    let _month = difference / month
    let _week = difference / (7 * day)
    let _day = difference / day
    let _hour = difference / hour
    let _min = difference / minute

    if (_year >= 1) {
      result = '發表於 ' + ~~(_year) + ' 年前'
    } else
 
 if (_month >= 1) {
      result = '發表於 ' + ~~(_month) + ' 個月前'
    } else if (_week >= 1) {
      result = '發表於 ' + ~~(_week) + ' 周前'
    } else if (_day >= 1) {
      result = '發表於 ' + ~~(_day) + ' 天前'
    } else if (_hour >= 1) {
      result = '發表於 ' + ~~(_hour) + ' 個小時前'
    } else if
 
 (_min >= 1) {
      result = '發表於 ' + ~~(_min) + ' 分鐘前'
    } else {
      result = '剛剛'
    }
    return result
  }
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36

好，程式碼噁心了點，我拿我以前寫的程式碼改的，沒有深入優化，大家就隨便看看，大概就是這麼個東西。

寫好程式碼之後，我們儲存檔案。但是此時，我們還不能使用我們的這個方法函式。我們必須在 main.js 中將我們的方法函式給繫結上。如下程式碼：

// 引用工具檔案
import utils from './utils/index.js'
// 將工具方法繫結到全域性
Vue.prototype.$utils = utils

• 1
• 2
• 3
• 4

還記得我們先前是如何將我們的介面請求函式給繫結上的嗎？這裡其實是採用了同樣的方法。如果不記得了，可以點選連結過去看看。

好了，這樣，我們寫的這個函式，就可以隨便被我們呼叫了。我們再來修改一下我們上面的 index.vue 中的程式碼，將 time 調整為：

<time v-text="$utils.goodTime(i.create_at)"></time>

• 1

然後，我們再來看一下實際的效果：

編寫內容頁面

照舊，先看東西，再說話：

<template>
  <div>
    <myHeader></myHeader>
    <h2 v-text="dat.title"></h2>
    <p>作者：{{dat.author.loginname}}　　發表於：{{$utils.goodTime(dat.create_at)}}</p>
    <hr>
    <article v-html="dat.content"></article>
    <h3>網友回覆：</h3>
    <ul>
      <li v-for="i in dat.replies">
        <p>評論者：{{i.author.loginname}}　　評論於：{{$utils.goodTime(i.create_at)}}</p>
        <article v-html="i.content"></article>
      </li>
    </ul>
    <myFooter></myFooter>
  </div>
</template>
<script>
import myHeader from '../components/header.vue'
import myFooter from '../components/footer.vue'
export default {
  components: { myHeader, myFooter },
  data () {
    return {
      id: this.$route.params.id,
      dat: {}
    }
  },
  created () {
    this.getData()
  },
  methods: {
    getData () {
      this.$api.get('topic/' + this.id, null, r => {
        this.dat = r.data
      })
    }
  }
}
</script>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40

好，我們這邊把程式碼寫進 src/page/content.vue 檔案。然後儲存，我在我們先前的列表頁面隨便點開一篇文章，然後我們看下結果：

好，按照我們的需求已經渲染出來了。

重複一下，樣式，我就不管了，自己去寫。

說明一下里面的重點

template 部分

其他的內容，我們在列表頁面已經見過了。這裡第一次出現 <article v-html="dat.content"></article> 這個東西。

同樣是渲染內容， v-html 和 v-text 有什麼區別呢？其實區別非常簡單，v-text 會把所有的內容當成字串給直接輸出出來。而 v-html 會把字串給轉換為 html 標記語言給渲染出來。這部門更多內容，請參考：https://cn.vuejs.org/v2/api/#v-html

注意了！ 我們在列表中，我們使用的是 Header 注意的元件命名方式，為什麼我這邊用了 myHeader 注意的元件命名方式呢？

其實，我想說明的是，我們不要使用 html 本身就支援的標籤名稱來自定義我們的元件，這容易導致混亂，最好，是像內容頁裡面這樣，使用自定義的標籤名。

好吧，我承認，就是我先前寫忘掉了，不要鄙視我~~但我感覺這裡強調一下也好，省得你以後也忘記了。

script 部分

程式碼基本上是一致的，重點是 id: this.$route.params.id, 這一句。

我們是這麼配置的：

export default new Router({
  routes: [
    {
      path: '/',
      component: Index
    }, {
      path: '/content/:id',
      component: Content
    }
  ]
})

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11

重點：path: '/content/:id', 中，我們使用了 :id 這個東西。這是動態路由匹配。參考文件： 《動態路由匹配》

我們需要從我們的 url 中，來獲取我們的 id 然後根據這個 id 來進行資料的查詢。

好，想起來了。那麼我們已經在 url 包含了這個 id 了。

http://localhost:8080/#/content/58eee565a92d341e48cfe7fc

• 1

如上：58eee565a92d341e48cfe7fc 這個就是 ID ，奇怪是奇怪了點，但確實就是 id。

我們如何取出來呢？

不用想很多複雜的事情，vuerouter 早就給我們準備瞭解決方法了。

我們可以在專案中列印如下程式碼：

console.log(this.$route)

• 1

擦，部落格寫到這裡 cnodejs.org 網站掛了。。。那就暫時不放我的列印結果圖了，大家可以看下官方文件 路由資訊物件的屬性

回頭，你也可以自己列印了看下，有助於你自己分析理解問題。

好了，除了上面的問題，我們再看下我們的介面資料呼叫，程式碼如下：

this.$api.get('topic/' + this.id, null, r => {
  this.dat = r.data
})

• 1
• 2
• 3

等於沒什麼要說的，就是把資料拿過來了而已，需要注意的是，我們的請求的介面地址是根據 id 進行變化的。所以，我這邊採用了字串拼接的方法，'topic/' + this.id 來得到我們真正想要請求的介面資料。