我們在上一篇博文中，渲染出來了一個列表，并在列表中使用了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

轉載于:https://www.cnblogs.com/xinhudong/p/7889694.html

總結

以上是生活随笔為你收集整理的八、VueJs 填坑日记之参数传递及内容页面的开发的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。