八、VueJs 填坑日記之參數傳遞及內容頁面的開發

我們在上一篇博文中，渲染出來了一個列表，並在列表中使用了router-link標簽，標簽內的：to就是鏈接地址，昨天咱們是<router-link :to="'/content/' + i.id">這樣寫的，今天我們來完成內容頁面的渲染。

編寫內容頁面
還是廢話少說，先上代碼，將以下代碼保存到/src/pages/Content.vue中：

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

 

然后我們在上一章的列表中隨便點擊一篇文章查看到以下界面：

關於樣式的東西，咱們后期集成amaze ui的時候再來實現，暫時只實現功能。

重點分析
其他的內容，我們在列表頁面已經見過了。這里第一次出現 <article v-html="dat.content"></article> 這個東西。同樣是渲染內容， v-html 和 v-text 有什么區別呢？其實區別非常簡單，v-text 會把所有的內容當成字符串給直接輸出出來。而 v-html 會把字符串給轉換為 html 標記語言給渲染出來。
更多關於vue的指令內容請參見：https://cn.vuejs.org/v2/api/#v-html

注意： 我們在列表中，我們使用的是 Header 注意的組件命名方式，為什么我這邊用了 myHeader 注意的組件命名方式呢？其實，我想說明的是，我們不要使用 html 本身就支持的標簽名稱來自定義我們的組件，這容易導致混亂，最好，是像內容頁里面這樣，使用自定義的標簽名。（先前忘記了，現在強調一下。大家可以對之前的代碼進行修改。）

 

script 部分
代碼基本上是一致的，重點是 id: this.$route.params.id, 這一句。還記得我們先前是怎么配置路由的嗎？忘記了不要緊，再回顧一下，/src/router/index.js里是這樣寫的：

import Vue from 'vue'
import Router from 'vue-router'
import Index from '@/pages/Index'
import Content from '@/pages/Content'

Vue.use(Router)

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

看重點：path: '/Content/:id', 中，我們使用了 :id 這個東西。這是動態路由匹配。我們需要從我們的 url 中，來獲取我們的 id 然后根據這個 id 來進行數據的查詢。那么我們已經在 url 包含了這個 id 了。

http://localhost:8080/#/Content/5a11132da6731ee928cc6bbc

如上：5a11132da6731ee928cc6bbc這個就是 ID ，奇怪是奇怪了點，但確實就是 id。如何獲取id參數，不用多想，vuerouter 早就給我們准備了解決方法。

我們可以在項目中打印，可以看到下圖紅框圈住的就是router對象：

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

我們再看下我們的接口數據調用，代碼如下：

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

 

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

 

錯誤處理
在上面圖中，我們發現出了一個錯誤，意思是說不能讀取名為loginname的屬性，因為沒有定義，那我們console.log(r.data)的時候，會發現loginname確實給我們返回了。那這是為什么呢？其實也沒有大不了的，這個意思是說初始的時候我們data里的dat: {}是空，確實是沒有author.loginname屬性存在。那怎么解決呢？很簡單，看代碼：

data () {
	return {
	  id: this.$route.params.id,
	  dat: {
		author:{
			loginname:""
		}
	  }
	}
},

 

既然說沒有定義，那我們定義上就OK了。到此參數傳遞和內容頁面已經開發完成，大家有疑問可以在評論里留言。也可以加入我拉QQ群。

 

在這里忠心感謝FungLeo，是你們無私的奉獻，才讓我們有了學習的參考，以下是地址：
http://blog.csdn.net/FungLeo/article/details/77604490